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

Question

这是一个小提琴--- 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之外，几乎没有解决这个问题。