jQuery로만 처음으로 작업하는 이벤트 분리

Question

선택한 날짜에 따라 다른 내용을 표시하는 타임 라인이 있습니다. 타임 라인을 클릭하거나 마우스 휠로 스크롤하여 날짜를 선택할 수 있습니다. 서로 다른 콘텐츠 요소의 페이드 아웃/페이드 효과를 얻기 위해 각 콘텐츠에 일부 애니메이션이 첨부되어 있습니다.이 경우 중첩 된 애니메이션과 콜백이 사용됩니다.

내가 할 수없는 일은 빨리 움직이는 경우 다음 애니메이션이 시작되기 전에 이전 애니메이션이 끝날 때까지 기다리는 것입니다. 아니면 더 나은 애니메이션 함수 시작 부분에서 스크롤 이벤트를 분리하고 마지막으로 animate 함수 호출의 콜백으로 다시 첨부합니다.이 함수는 처음에만 작동하지만 후속 스크롤에서는 작동하지 않습니다.

아이디어가 있으십니까?

함수 검출 스크롤 : detatching jumpToEvent 함수 호출 애니메이션

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

기능, 스크롤링

 //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'); 
       } 
      }); 
     } 

기능, 즉 표시하는 정확한 콘텐츠를 선택

//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)