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方法。

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');
});

Answer 2

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

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

Answer 3

我找到了另一个解决方案:对于足够多的DOM更新，可以使用window.scrollBy(0, 1);将页面滚动到1像素