我可以强制浏览器在继续执行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 异步插件（只有几行代码），它将定期将控制权交还给浏览器（通过使用setTimeout）。这可以防止浏览器冻结并毫无问题地显示等待消息。