Question

我有一个重要的脚本可以同步运行，我想显示一条消息，例如＆＃34;处理，请等待......＆＃34;在它运行之前，用户并不知道为什么页面被冻结几秒钟。我尝试做类似的事情：

messageBox.html("Processing, please wait...");

// run hefty script

messageBox.html("Finished!");

但是显示消息之前的页面阻止，即使messageBox.html()语句首先出现。这是为什么？

Answer 1

有时在超时时间内发出“重要脚本”是有意义的。

messageBox.html("Processing, please wait...");

setTimeout(function () {
    heftyScript();

    messageBox.html("Finished!");
}, 1);

发生这种情况的原因是因为它经常保存UI更新，直到事件循环结束（在“大量”脚本完成之后）。设置超时可确保在事件循环的后续迭代之前不会运行大量脚本（让UI在事先迭代结束时更新）。

Answer 2

在这种情况下，我会考虑Web Workers：http://www.html5rocks.com/en/tutorials/workers/basics/

更新：

如果由于某种原因您无法使用它们，那么您应该将处理拆分为较小的块并异步运行它们。锁定UI不是一种选择。

以下是您可以做的事情：

function heftyScript() {

  var arr = [...];
  var chunk_start = 0;

  function do_chunk() {

    for( var i = 0; i < 100; ++i ) { // 100 items per chunk
       if( chunk_start >= arr.length)
         return;
       process( arr[chunk_start++] ); // process one element 
    }
    window.setTimeout(do_chunk,10);
  }
  do_chunk();
}

Answer 3

这取决于花费的时间。如果它正在下载并解析JavaScript文件，messageBox.html()必须是纯html，或者在引用外部文件之前在脚本块中执行此操作。如果花费的时间是运行那个长函数，那么setTimeout(function () { heftyScript(); messageBox.html('finished'); }, 1);运行得非常好。

在脚本块之前显示消息

3 个答案: