前言：
其他一些答案是正确的，但实际上并没有说明要解决的问题是什么，所以我创建了这个答案来展示详细的说明。
因此，我发布了有关浏览器功能以及如何使用setTimeout()帮助的详细演练。它看起来很长，但实际上非常简单明了——我只是把它写得很详细。
更新：我制作了一个 JSFiddle 来现场演示以下解释：http: //jsfiddle.net/C2YBE/31/。非常感谢@ThangChung 帮助启动它。
UPDATE2：以防万一 JSFiddle 网站死亡或删除代码，我在最后将代码添加到这个答案中。
详情：
想象一个带有“做某事”按钮和结果 div 的 Web 应用程序。
onClick“做某事”按钮的处理程序调用一个函数“LongCalc()”，它做了两件事：
进行很长的计算（比如说需要 3 分钟）
将计算结果打印到结果 div 中。
现在，您的用户开始对此进行测试，单击“做某事”按钮，然后页面似乎无所事事 3 分钟，他们变得焦躁不安，再次单击按钮，等待 1 分钟，没有任何反应，再次单击按钮...
问题很明显 - 你想要一个“状态”DIV，它显示正在发生的事情。让我们看看它是如何工作的。
因此，您添加了一个“状态”DIV（最初为空），并修改onclick处理程序（函数LongCalc()）来做 4 件事：
将状态“正在计算...可能需要约 3 分钟”填充到状态 DIV
进行很长的计算（比如说需要 3 分钟）
将计算结果打印到结果 div 中。
将状态“计算完成”填充到状态 DIV
而且，您很乐意将应用程序提供给用户进行重新测试。
他们回到你身边，看起来很生气。并解释当他们单击按钮时，状态 DIV 从未更新为“正在计算...”状态！！！
你挠头，在 StackOverflow 上四处询问（或阅读文档或谷歌），然后意识到问题所在：
浏览器将所有由事件产生的“TODO”任务（包括 UI 任务和 JavaScript 命令）放入单个队列中。不幸的是，使用新的“正在计算...”值重新绘制“状态”DIV 是一个单独的 TODO，它会排到队列的末尾！
以下是用户测试期间事件的细分，每个事件之后的队列内容：
- 队列：
[Empty]
- 事件：点击按钮。活动后排队：
[Execute OnClick handler(lines 1-4)]
- 事件：在 OnClick 处理程序中执行第一行（例如更改状态 DIV 值）。事件后排队：
[Execute OnClick handler(lines 2-4), re-draw Status DIV with new "Calculating" value]。请注意，虽然 DOM 更改是即时发生的，但要重新绘制相应的 DOM 元素，您需要一个由 DOM 更改触发的新事件，该事件位于队列末尾。
- 问题！！！ 问题！！！详细说明如下。
- 事件：在处理程序中执行第二行（计算）。排队后：
[Execute OnClick handler(lines 3-4), re-draw Status DIV with "Calculating" value]。
- 事件：在处理程序中执行第 3 行（填充结果 DIV）。排队后：
[Execute OnClick handler(line 4), re-draw Status DIV with "Calculating" value, re-draw result DIV with result]。
- 事件：在处理程序中执行第 4 行（使用“DONE”填充状态 DIV）。队列：
[Execute OnClick handler, re-draw Status DIV with "Calculating" value, re-draw result DIV with result; re-draw Status DIV with "DONE" value]。
return事件：从onclick处理程序子隐含执行。我们从队列中取出“Execute OnClick 处理程序”并开始执行队列中的下一项。- 注意：由于我们已经完成了计算，因此用户已经过了 3 分钟。重画事件还没有发生！！！
- 事件：使用“计算”值重新绘制状态 DIV。我们重新绘制并将其从队列中移除。
- 事件：使用结果值重新绘制 Result DIV。我们重新绘制并将其从队列中移除。
- 事件：使用“完成”值重新绘制状态 DIV。我们重新绘制并将其从队列中移除。眼尖的观众甚至可能会注意到“状态 DIV 与“计算”值在几分之一微秒内闪烁 -计算完成后
所以，根本的问题是“状态”DIV的重绘事件被放置在最后的队列中，在“执行第2行”事件之后需要3分钟，所以实际的重绘不会发生，直到计算完成后。
救援来了setTimeout()。它有什么帮助？因为通过调用长执行代码setTimeout，您实际上创建了 2 个事件：setTimeout执行本身，以及（由于 0 超时）正在执行的代码的单独队列条目。
因此，为了解决您的问题，您将onClick处理程序修改为两个语句（在一个新函数中或只是一个块中onClick）：
将状态“正在计算...可能需要约 3 分钟”填充到状态 DIV
执行setTimeout()0 超时并调用LongCalc()function。
LongCalc()功能与上次几乎相同，但显然没有“正在计算...”状态DIV更新作为第一步；而是立即开始计算。
那么，事件序列和队列现在是什么样子的呢？
- 队列：
[Empty]
- 事件：点击按钮。活动后排队：
[Execute OnClick handler(status update, setTimeout() call)]
- 事件：在 OnClick 处理程序中执行第一行（例如更改状态 DIV 值）。事件后排队：
[Execute OnClick handler(which is a setTimeout call), re-draw Status DIV with new "Calculating" value]。
- 事件：在处理程序中执行第二行（setTimeout 调用）。排队后：
[re-draw Status DIV with "Calculating" value]。队列在 0 秒内没有任何新内容。
- 事件：超时警报响起，0 秒后。排队后：
[re-draw Status DIV with "Calculating" value, execute LongCalc (lines 1-3)]。
- 事件：使用“计算”值重新绘制状态 DIV。排队后：
[execute LongCalc (lines 1-3)]。请注意，此重新绘制事件实际上可能在警报响起之前发生，这同样有效。
- ...
万岁！在计算开始之前，状态 DIV 刚刚更新为“正在计算...”！！！
下面是来自 JSFiddle 的示例代码，说明了这些示例： http: //jsfiddle.net/C2YBE/31/：
HTML 代码：
<table border=1>
<tr><td><button id='do'>Do long calc - bad status!</button></td>
<td><div id='status'>Not Calculating yet.</div></td>
</tr>
<tr><td><button id='do_ok'>Do long calc - good status!</button></td>
<td><div id='status_ok'>Not Calculating yet.</div></td>
</tr>
</table>
JavaScript 代码：（在 jQuery 1.9 上执行onDomReady并且可能需要 jQuery 1.9）
function long_running(status_div) {
var result = 0;
// Use 1000/700/300 limits in Chrome,
// 300/100/100 in IE8,
// 1000/500/200 in FireFox
// I have no idea why identical runtimes fail on diff browsers.
for (var i = 0; i < 1000; i++) {
for (var j = 0; j < 700; j++) {
for (var k = 0; k < 300; k++) {
result = result + i + j + k;
}
}
}
$(status_div).text('calculation done');
}
// Assign events to buttons
$('#do').on('click', function () {
$('#status').text('calculating....');
long_running('#status');
});
$('#do_ok').on('click', function () {
$('#status_ok').text('calculating....');
// This works on IE8. Works in Chrome
// Does NOT work in FireFox 25 with timeout =0 or =1
// DOES work in FF if you change timeout from 0 to 500
window.setTimeout(function (){ long_running('#status_ok') }, 0);
});
