如何在事件处理过程中更改HTML

Question

在所有事件完成之前，html中的更改不会发生

(function(){
function sleep(ms) {
const date = Date.now();
do {
} while (Date.now() - date < ms);
}
let button = document.getElementById('update');

//basic code example:
/*button.addEventListener('click', event => {
event.target.value = 'aaa';
sleep(1000);//or another long process
event.target.value = 'bbb';
});/**/
//even so:
button.addEventListener('click', event => {
event.target.value = 'aaa';
});
button.addEventListener('click', event => {
sleep(1000);//or another long process
});
button.addEventListener('click', event => {
event.target.value = 'bbb';
});
})();

<input type="button" value="Update" name="update" id="update">

这适用于所有类型的事件。

这是什么原因？

有没有办法在事件执行期间(之前(更改html？

Answer 1

正如Martin在评论中提到的，您应该了解Promise对象和异步操作。请参阅：使用Promises

以下是您的MDN示例Promise的片段。

(function () {
function sleep(ms) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('done');
}, ms);
})
}
let button = document.getElementById('update');
//basic code example:
button.addEventListener('click', event => {
sleep(2000).then(res => event.target.value = res);//or another long process
event.target.value = 'loading...';
});
})();

<input type="button" value="Update" name="update" id="update">

Answer 2

将值更改作为回调添加到长期运行的函数中，并使用setTimeout触发重新绘制：

document.addEventListener("click", bttnEx);
function bttnEx(evt) {
const origin = evt.target;
if (origin.name === "update") {
origin.value = "waiting...";
const longRun = () => sleep(2000, () => origin.value = "done!");
return setTimeout(longRun, 1);
}
}
function sleep(ms, callback) {
const date = Date.now();
do {} while (Date.now() - date < ms);
callback();
}

<input type="button" value="Update" name="update" id="update">

您也可以以嵌套方式使用requestAnimationFrame：

document.addEventListener("click", bttnEx);
function bttnEx(evt) {
const origin = evt.target;

if (origin.name === "update") {
const runSomethingLongAndReEnable = () => {
const date = Date.now();
do {} while (Date.now() - date < 2000);
origin.value = "Update";
origin.disabled = false;
};
const waitAndDisable = () => {
origin.value = "Busy...";
origin.disabled = true;
requestAnimationFrame(runSomethingLongAndReEnable);
};

return requestAnimationFrame(waitAndDisable);
}
}

body {
margin: 2rem;
}
input[disabled] {
color: red !important;
}

<input type="button" value="Update" name="update" id="update">