我可以强制浏览器在继续执行 javascript 之前渲染出 DOM 更改吗？

Question

我正在填充一个包含大约 500 行的表，这需要浏览器几秒钟的时间来呈现，而它看起来是冻结的。这就是为什么我要显示一条请求用户耐心的消息：

$.ajax({
  url: '{{ search_url }}',
  success: function (response) {
    $('#progress').text('Rendering results, please wait...');
    clear_table();
    populate_table(response);
  }
});

消息未显示 - 显然浏览器（在 Chrome 23 中测试）缓冲了所有 DOM 更改并一次性渲染它们。

作为一种解决方法，我发现当我延迟填充表格直到执行返回到事件循环时，实际显示的消息：

$.ajax({
  url: '{{ search_url }}',
  success: function (response) {
    $('#progress').text('Rendering results, please wait...');
    window.setTimeout(function () {
      clear_table();
      populate_table(response);
    }, 0);
  }
});

我想知道这种方法是否总是有效，或者这种情况下是否有更好的技术。

Answer 1

这是因为 Javascript 执行是单线程的。因此，在执行所有 JS 代码之前，浏览器不会做任何事情——换句话说，它会冻结。为了防止这种情况发生，我建议您使用jQuery Async plugin（只是几行代码），它会定期将控制权交还给浏览器（通过使用setTimeout）。这可以防止浏览器冻结，并且会毫无问题地显示等待消息。