我可以強制瀏覽器在繼續執行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插件 （這只是幾行代碼），它會定期將控制權交還給瀏覽器（通過使用setTimeout ）。 這可以防止瀏覽器凍結並顯示等待消息而不會出現任何問題。