javascript - 我可以强制浏览器在继续执行 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)。这可以防止浏览器卡住，并且会毫无问题地显示等待消息。