jQuery 콜백 최적화

나는 원하는대로 작동하는 함수를 가지고 있습니다. 단지 너무 엉망이되어 부풀어 오르고 궁금해합니다. 아래 코드를 작성하는 더 좋은 방법이 있습니까?jQuery 콜백 최적화

function careerFlyIn(){ 

    var distance = $('.row').offset().top, 
     $window = $(window); 
    var distance = distance - 200; 
    var flyInR = $('.path-description'); 
    var flyInL = $('.path-title'); 

    $window.scroll(function() { 
     if ($window.scrollTop() >= distance) { 
      $('.career-path .row:first-child').find(flyInL).animate({ 'left' : '0px' } ,400, 'easeOutBounce', function() { 
       $('.career-path .row:nth-child(2)').find(flyInL).animate({ 'left' : '0px' } ,400, 'easeOutBounce', function() { 
        $('.career-path .row:nth-child(3)').find(flyInL).animate({ 'left' : '0px' } ,400, 'easeOutBounce', function() { 
         $('.career-path .row:nth-child(4)').find(flyInL).animate({ 'left' : '0px' } ,400, 'easeOutBounce', function() { 
          $('.career-path .row:nth-child(5)').find(flyInL).animate({ 'left' : '0px' } ,400, 'easeOutBounce', function() { }); 
         }); 
        }); 
       });    
      }) 
      $('.career-path .row:first-child').find(flyInR).animate({ 'right' : '0px' } ,400, 'easeOutBounce', function() { 
       $('.career-path .row:nth-child(2)').find(flyInR).animate({ 'right' : '0px' } ,400, 'easeOutBounce', function() { 
        $('.career-path .row:nth-child(3)').find(flyInR).animate({ 'right' : '0px' } ,400, 'easeOutBounce', function() { 
         $('.career-path .row:nth-child(4)').find(flyInR).animate({ 'right' : '0px' } ,400, 'easeOutBounce', function() { 
          $('.career-path .row:nth-child(5)').find(flyInR).animate({ 'right' : '0px' } ,400, 'easeOutBounce', function() { }); 
         }); 
        }); 
       });    
      }) 
     } 
    }); 

};

출처

2013-08-16 Liam

애니메이션을 적용하고 목록에서 비동기 재귀를 사용하는 항목의 목록을 만듭니다.

function animate(elements, callback) 
{ 
    if (elements.length){ 
     elements.eq(0).find(flyInR).animate({ 'right' : '0px' }, 400, 'easeOutBounce'); 
     elements.eq(0).find(flyInL).animate({ 'left' : '0px' }, 400, 'easeOutBounce', function(){ 
      // Do the remainder of the list (after first item) 
      animate(elements.slice(1), callback); 
     }); 
    } 
    else { 
     // All done, call the final callback 
     callback(); 
    } 
} 

animate($('.career-path .row'), function() 
{ 
    // do something when all items have finished animating 
});

비슷한 비동기 작업 집합에이 패턴을 적용 할 수 있습니다. 이 예제에서 왼쪽 및 오른쪽 애니메이션은 병렬로 실행되지만 하나만 다음 이벤트 (이 경우 왼쪽)를 트리거합니다.

출처

2013-08-16 13:11:02

을 테스트하지 왜 downvote? 이것은 작동하고 많은 비동기 문제에 유용한 기술입니다. –

이 정보가 도움이 되나요?

$window.scroll(function() { 
    if ($window.scrollTop() >= distance) { 

    $('.career-path .row').each(function(i) { 
     $(this).find(flyInL).delay(400*i) 
      .animate({ 'left' : '0px' } ,400, 'easeOutBounce'); 

     $(this).find(flyInR).delay(400*i) 
      .animate({ 'right' : '0px' } ,400, 'easeOutBounce'); 
    }); 
    } 
});

jQuery를 .delay() 방법, Sets a timer to delay execution of subsequent items in the queue 사용.

출처

2013-08-16 13:14:32

'.delay()'메서드를 사용하면 애니메이션이 서로 발생합니다. –

참. 나는 내 의견을 철회 :) –

시도

function animate($rows, idx, selector, animate) { 
    $rows.eq(idx).find(selector).animate(animate, 400, 'easeOutBounce', function() { 
     if (idx < $rows.length - 1) { 
      animate($rows, idx + 1, selector, animate) 
     } 
    }); 
} 

var $rows = $('.career-path .row'); 
animate($rows, 0, flyInL, { 
    'left' : '0px' 
}) 
animate($rows, 0, flyInR, { 
    'right' : '0px' 
})

참고 :

출처

2013-08-16 13:16:52

jQuery 콜백 최적화

답변

관련 문제