1

简单的问题。

DOM 操作调用后被调用的长时间运行的 javascript 函数阻止了操作它的 DOM 有什么特别之处？这是一个例子：

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() 完成！在长时间运行的函数退出而不是点击事件后同时出现！立即触发并block() 完成！稍后出现。

这是一个演示：http: //jsfiddle.net/bxuNb/1/

if notify("点击事件！"); 替换为alert("click event!"); ，然后它立即响应。这里发生了什么？

谢谢！

4

1 回答 1

1

DOM 有什么特别之处，以至于操作它会被 javascript 函数阻止

它已优化。每次与 DOM 交互后，您的屏幕都不会重新绘制。

…在 DOM 操作调用后调用

无法知道在执行过程中没有进一步的 DOM 操作 - 因此它不会立即更新您的屏幕。即使通过静态代码分析可以做到这一点，您的示例中还有另一个DOM 操作。解释器只是不知道中间的几行代码将花费那么长时间来执行。

如果您想允许屏幕在两者之间更新，请在第一次输出后以超时启动长时间运行的块：

document.body.onclick = function(){
  notify("click event!");
  setTimeout(block, 0);
};
于 2013-07-18T17:43:15.927 回答