递归调用java脚本动画函数，每次循环后延时

Question

在ready函数scrollDown动画开始时，在scrollDown的完成回调监听器中我调用了scrollUp函数开始向上滚动动画。一个循环完成后，向下滚动动画需要一些时间才能重新开始。 更重要的是，每个循环完成后延迟时间都会增加。

$(document).ready(function(){
   scrollDown();
});
function scrollDown(){
    $('html, body').animate({
        scrollTop:$("#4").offset().top-100
    },
    {
        duration:2000,
        complete: function(){
           scrollUp();
        }
    });
}
function scrollUp(){
        $('html, body').animate({
            scrollTop:$("#1").offset().top-100
        },
        {
            duration:2000,
            complete: function(){
               scrollDown();
            }
        });
}

Answer 1

添加 $('html, body').stop(); 成功了，现在动画退出流畅且没有延迟时间。但是为什么我必须调用他的 stop() 函数呢？因为我已经实现了 complete 回调。

$(document).ready(function(){
   scrollDown();
});
function scrollDown(){
    $('html, body').stop(); // no idea why I need to call this stop function
    $('html, body').animate({
        scrollTop:$("#4").offset().top-100
    },
    {
        duration:2000,
        complete: function(){
           scrollUp();
        }
    });
}
function scrollUp(){
        $('html, body').stop(); // no idea why I need to call this stop function
        $('html, body').animate({
            scrollTop:$("#1").offset().top-100
        },
        {
            duration:2000,
            complete: function(){
               scrollDown();
            }
        });
}

递归调用java脚本动画函数，每次循环后延时

Recursive call java script animate function, time dealy after each cycle

javascript

animation

jquery-animate