javascript - 为什么我们不能使用 for 循环来创建动画？

Question

在 jQuery 库和 offset() 方法的帮助下，通过编写这个简单的代码，元素将逐渐改变位置似乎是合乎逻辑的

for (i = 0; i < 900; i = i + .5) { 
    $('#moving-element').offset({ top: i })
}

浏览器会停顿一会儿，最后将元素移动到距顶部900px的位置，看不到过渡。出于好奇，我写了这个:

for (i = 0; i < 900; i = i + .5) { 
    $('#moving-element').offset({ top: i }); 
    console.log(i)
}

看到控制台正在输出连续的数字，但它只在 for 循环结束后才偏移元素。

为什么这不是随着代码的执行逐渐完成的？

Answer 1

因为 javascript 是单线程事件建模运行时(至少在当前版本中)。

这意味着当您运行 for 循环时，没有其他任务可以运行。这意味着接受用户输入、更新屏幕等。因此循环会完整运行并显示最终结果。