当用户按下按钮时,我有一些 JavaScript 代码会执行一些非常密集的数据处理(大约需要两秒钟才能完成),同时我想在页面上全局设置等待光标。
我使用 AngularJS,这是我尝试过的:
document.body.style.cursor = 'wait';
$timeout(function() { document.body.style.cursor = 'wait'; }, 1)
.then(function() { /*procesamiento intensivo aquí*/ })
.then(function() { document.body.style.cursor = 'default'; });
...但它没有按预期工作:处理完成但光标没有改变。有趣的是,如果我删除最后一行,我会看到光标确实发生了变化,但在渲染完成之后。
我确定我错过了 Javascript 中 UI 事件循环的一些重要方面,但我看不到它。我怎样才能看到等待光标?
你有两个问题。
第一个是您只更改正文中的光标(显然更改会在正文上看到,但不会在其余元素上看到),我建议类似
第二个是您在同一个视图周期(Angular)内进行光标更改,因此光标更改未完成。
此示例有效(将其关联到某个按钮)
josejuan 的回答做了一点小小的改动。我必须定义一种新风格(见这里):
...代码是:
请注意,我还必须增加超时的间隔值。
将光标绑定到 $scope 的元素,并在您进行繁重处理时更新范围。
在你的 javascript 中:
尽量避免将纯 javascript 与 angular 混合,因为循环和同步会有很多问题。