此问题来自超级用户migrated，因为3天前可以在Stack Overflow. Migrated上回答。
- （这是一个编辑过的问题，基于Adam H的帮助。）*
我有一个用Javascript编写的复杂的web应用程序。有些操作很长，我想在这些操作过程中显示忙碌的光标。这些操作在代码的许多地方采用许多形式。它们检查、修改和重新排列DOM，并且经常添加事件处理程序。
我想使用一个wrapper-function。wrapper应该显示忙碌的光标，执行被 Package 的函数，然后将光标恢复到正常状态。简化后，它看起来像这样：
function lengthy1(func) {
document.body.classList.add('waiting');
document.getElementById('notice').innerText = 'waiting';
window.setTimeout(() => {
func();
document.body.classList.remove('waiting')
document.getElementById('notice').innerText = 'done';
}, 0); // Zero delay is unreliable, but works almost always with 100 msec
}
function lengthy2(func) {
document.body.classList.add('waiting');
document.getElementById('notice').innerText = 'waiting';
new Promise((resolve, reject) => {
func();
resolve();
}).then(() => {
document.body.classList.remove('waiting')
document.getElementById('notice').innerText = 'done';
});
}
function LongAction() {
// First add many paragraphs...
for (let i = 0; i < 20000; i++) {
const para = document.createElement('p');
para.innerText = `This is paragraph ${i}`;
para.classList.add('asdf');
document.body.appendChild(para);
}
// ... then remove them again.
let matches = document.getElementsByClassName('asdf');
while (matches.length > 0) matches[0].remove();
}
function butt1() {
lengthy1(LongAction);
}
function butt2() {
lengthy2(LongAction);
}body.waiting * {
cursor: wait !important;
}<body>
<span id='notice'>xxx</span><br>
<button onClick='butt1();'>Button 1</button>
<button onClick='butt2();'>Button 2</button>
</body>函数lengthy1（）是我最初的尝试，它经常工作，但并不总是如此，当延迟增加时工作得更频繁。
函数lengthy2（）是从Adam H改写而来的。这在Adam H的版本中可以正常工作，但在我重写的版本中不行。
在冗长的操作过程中可靠地更改光标的最佳方法是什么？
1条答案
按热度按时间rqcrx0a61#
使用承诺。
第二种溶液
同时使用promise和setTimeout。
一个一个三个一个一个一个一个一个四个一个一个一个一个一个五个一个