Javascript 优化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 () {  }); 
                        });
                    });
                });             
            })
        }
    });

};

---

创建要设置动画的项目列表，并在列表上使用异步递归

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

---

您可以将此模式应用于任何一组类似的异步操作。在本例中，左侧和右侧动画并行运行，但只有一个会触发下一个事件（在本例中为左侧）。

创建要设置动画的项目列表，并在列表上使用异步递归

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

您可以将此模式应用于任何一组类似的异步操作。在本例中，左侧和右侧动画并行运行，但只有一个动画触发下一个事件（在本例中为左侧）。

这有帮助吗

$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方法，

设置计时器来延迟队列中后续项目的执行

这有帮助吗

$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方法，

设置计时器以延迟队列中后续项目的执行

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

函数动画（$rows，idx，selector，animate）{
$rows.eq（idx）.find（选择器）.animate（animate，400，'easeOutBounce'，function（）{
如果（idx<$rows.length-1）{
动画（$rows，idx+1，选择器，动画）
}
});
}
var$rows=$（'.career path.row'）；
设置（$rows，0，flyInL{
“左”：“0px”
})
动画（$rows，0，flyInR{
“右”：“0px”
})

注意：未测试
尝试

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

函数动画（$rows，idx，selector，animate）{
$rows.eq（idx）.find（选择器）.animate（animate，400，'easeOutBounce'，function（）{
如果（idx<$rows.length-1）{
动画（$rows，idx+1，选择器，动画）
}
});
}
var$rows=$（'.career path.row'）；
设置（$rows，0，flyInL{
“左”：“0px”
})
动画（$rows，0，flyInR{
“右”：“0px”
})

注意：未使用
.delay（）
方法测试
，动画会依次出现。True。我收回了我的评论：）通过使用
.delay（）
方法，动画会依次出现。True。我收回我的评论：）为什么投否决票？这是一种有效的技术，对于许多异步问题都很有用？对于许多异步问题，这是一种有用的技术。