简单问题。
DOM有什么特别之处,以至于在DOM操作调用后被调用的长时间运行的javascript函数阻止了对它的操作?这里有一个例子:
function notify(msg) {
var div = document.createElement("div");
div.textContent = msg;
document.body.appendChild(div);
}
// long-running func
function block() {
var iter = 3e8;
while (iter--)
Math.sqrt(iter);
notify("block() done!");
}
document.body.onclick = function(){
notify("click event!");
block();
};
两者,点击事件和块()完成在长时间运行的函数退出后同时出现,而不是单击事件立即触发并完成block()稍后出现。
这里有一个演示:http://jsfiddle.net/bxuNb/1/
if通知("点击事件!")替换为警报("点击事件!"),然后它立即响应。这是怎么回事?
谢谢!
DOM的特殊之处在于,javascript函数会阻止对其进行操作
它经过了优化。您的屏幕不会在每次与DOM交互后重新绘制。
…在DOM操作调用后调用
不可能知道在执行过程中没有进一步的DOM操作,因此它不会立即更新您的屏幕。尽管静态代码分析可以实现这一点,但在您的示例中还有另一个DOM操作。解释器就是不知道中间的几行代码会花那么长时间来执行。
如果你想让屏幕在两者之间更新,在第一次输出后超时启动长时间运行的块:
document.body.onclick = function(){
notify("click event!");
setTimeout(block, 0);
};