在继续执行javascript之前，我可以强制浏览器呈现DOM更改吗？

我正在填充一个包含大约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插件 （这只是几行代码），它会定期将控制权交还给浏览器（通过使用setTimeout ）。 这可以防止浏览器冻结并显示等待消息而不会出现任何问题。