在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循环结束后它才会偏移元素.
为什么这不会在代码执行时逐渐完成？
解决方法
因为javascript是单线程事件建模的运行时(至少在当前的版本中).
这意味着在运行for循环时,没有其他任务可以运行.这意味着接受用户输入,更新屏幕等.因此循环完全运行,然后显示最终结果.