jQueryを初めて初めて使用するデタッチイベント

Question

選択した日付に応じて異なるコンテンツを表示するタイムラインがあります。日付は、マウスホイールでスクロールするか、タイムラインをクリックするかのいずれかで選択できます。 さまざまなコンテンツ要素のフェードアウト/フェードインを行うために、各コンテンツにいくつかのアニメーションが添付されています。このために、ネストされたアニメーションをコールバックとともに使用しています。

私が行うことができないことは、スクロールが速い場合、次のアニメーションが始まる前に、前のアニメーションが終了するのを待つことです。 また、アニメーション関数の先頭でスクロールイベントを切り離して、最後のanimate関数呼び出しのコールバックとして再接続します。これは初めての動作ですが、後続のスクロールでは機能しません。

スクロールを検出

機能：

：

 //detect mouse scrolling and determine the direction 
     function detectScroll() { 
      $('.events-content').first().bind('mousewheel', function (e) { 
       var delta = e.originalEvent.wheelDelta; 
       if (delta > 0) { 
        jumpToEvent('prev'); 
       } else { 
        jumpToEvent('next'); 
       } 
      }); 

      //firefox 
      $('.events-content').first().on('DOMMouseScroll', function (e) { 
       var delta = e.originalEvent.detail; 
       if (delta < 0) { 
        jumpToEvent('prev'); 
       } else if (delta > 0) { 
        jumpToEvent('next'); 
       } 
      }); 
     } 

機能がショーに正しい内容を選択しjumpToEvent関数によって呼び出されるアニメーションで

function detachScroll(){ 
      console.log('detach'); 
      $('.events-content').first().unbind('mousewheel'); 
      $('.events-content').first().off('DOMMouseScroll'); 
     } 

機能を、スクロールdetatching

//display correct content depending on the selected date function updateVisibleContent(event, eventsContent) { var visibleContent = ...., selectedContent =....; detachScroll(); visibleContent.find('....').each(function() { $(this).animate({ opacity: 0 //hide current content }, 600, function() { visibleContent.removeClass('selected'); selectedContent.attr('class', 'selected'); //now show the next content, with 3 subsequent steps (Showing only one for the sake of readability) selectedContent.find('...').first().animate({ opacity: 1 }, 500, function() { detectScroll(); }); }); }); } 

Answer 1

アニメーション呼び出しの前に.stop()を追加する必要があります。これにより、次のアニメーションを呼び出すときに保留中/進行中アニメーションが発生しなくなります。

Answer 2

jQuery deferred-objectを試しましたか？これは、非同期関数が終了するのを待つ方法です。

function doAnimations(domElement, i) { 
    var dfd = jQuery.Deferred(); 

    $(domElement[i]).animate({ 
    //do somthing 
    }, 600, function() { 
    dfd.resolve 
    }) 

    return dfd.promise(); 
} 

//And this is how you can itterate tru items 
(function rec(i){ 
    if(i >= numbers of itterations) { 
    console.log('End') 
    return false 
    } 

    doAnimations(domElement, i).done(function(){ 
    rec(++i) 
    }) 
})(0)