JavaScript中的DoEvents

Question

我有以下内容：

$('body, a').addClass('cursor-wait');
for (var I=0, L = myArray.length; I < L; I++) {
   // tight loop here
}
$('body, a').removeClass('cursor-wait');

但是我不确定鼠标光标的等待图标是否会立即显示。

问：有没有一种像JavaScript中的"DoEvents"一样的方法，可以让我知道在进入循环之前DOM已经被更新了？

或许可以使用setTimeout方法。

- Phillip Senn

Answer 1

以下是发生的情况:

处理您页面的浏览器实例是单线程的。对DOM的更改会立即发生。然而，在您的脚本正在运行时，浏览器被阻塞，无法运行其布局管理器，该管理器根据已更改的CSS类更新页面。您是正确的，setTimeout是让控制权交给布局管理器并在屏幕上看到更改的最佳方法。您甚至不需要设置延迟，只需调用setTimeout即可使布局管理器有机会重新绘制页面。

$('body, a').addClass('cursor-wait');
setTimeout(function () {
    for (var I=0, L = myArray.length; I < L; I++) {
       // tight loop here
    }
    $('body, a').removeClass('cursor-wait');
});

- EMI

---

实际上，setTimeout会引入非零延迟；符合HTML5标准的浏览器将会把延迟时间“夹紧”至少为4毫秒（早期版本的Firefox等浏览器为10毫秒）。https://developer.mozilla.org/en/DOM/window.setTimeout - PleaseStand

Answer 2

不需要这样做，addClass 直接改变 DOM，因此当您的 for 循环运行时，cursor-wait 已经被添加了。

为什么要将 cursor-wait 添加到 body 标签和所有 a 标签中？

- James Kyburz

---

当用户点击命令以对表格进行排序时，我需要立即提供反馈，例如光标：等待。 - Phillip Senn

Answer 3

我找到了另一种解决方案：对于DOM更新，只需使用window.scrollBy(0, 1);将页面滚动1像素即可。

- Indian