javascript - 为什么这个滚动动画不起作用？

Question

这是一个 fiddle --- http://jsfiddle.net/mFrbA/2/

这只是对下面代码的测试。我试图让它缓慢而稳定地向下滚动。我不只是直接滚动到文档底部来直接执行它的原因是因为我想以增量方式执行它，同时让用户有机会取消它(因此变量 scrolling，可由外部函数切换。

wait 变量的原因是(理论上)防止 while 循环比动画更快地循环——我不确定它是否会在重新开始之前等待动画完成.但是完整的函数永远不会被调用，动画也永远不会发生。

但是，这些都没有执行。我不确定我做错了什么。

$(function() {
    scrolling = true;
    while (scrolling) {
        var wait = true; 
        $('html, body').animate(
            { scrollTop: '+=50' }, 
            { duration: 800,
             easing: 'linear',
             complete: function(){
                 alert("hi again");
                 wait = false;}
            }
        );
        while(wait) {
            console.log("waiting");
        }
    }
});

Answer 1

浏览器中的 JavaScript 是带有事件循环的单线程(实际上)。您的 while(wait) 会占用 JavaScript 执行，因此动画(异步)永远不会发生。

这就是我们使用回调的原因，除了可怕的 setInterval 之外，几乎没有解决办法。