Javascript 为什么JS要等到函数完成后再更改背景色？

为什么在我复制时背景没有改变？我添加了一个

console.log（）

，如您所见，

console.log（）

可以工作，但背景不会改变。这里有什么问题

要进行测试，请单击代码段，然后按

CMD+C

（Windows:

CTRL+C

）

window.addEventListener（'copy'，函数（e）{
e、 预防默认值（）；
//这应该改变！
document.getElementById（“对象”）.style.backgroundColor='white'；
log（“启动！”）；
tryCopyAsync（e）。然后（（）=>
document.getElementById（“对象”）.style.backgroundColor='gray'
);
});
异步函数tryCopyAsync（e）{
if（navigator.clipboard）{
等待e.clipboardData.setData（'text/plain'，getText（））；
}
}
函数getText（）{
var html=''；
var行=“”；
对于（i=0；i那么，首先，“then”的参数应该是一个函数

.then(()=>{})

从运行代码来看，它是这样的

document.getElementById("object").style.backgroundColor = 'gray'; 

将背景颜色设置为白色后立即调用，因此您无法注意到它变为白色，即使它变为白色（只是非常短暂）

尝试在tryCopyAsync函数中设置一些日志记录，看看为什么它完成得太快。
首先，您的
sleepFor
方法完全同步地阻塞了事件循环，即使它是从
异步
函数调用的：


window.addEventListener（'copy'，函数（e）{
e、 预防默认值（）；
//这应该改变！
document.getElementById（“对象”）.style.backgroundColor='white'；
log（“启动！”）；
tryCopyAsync（e）。然后（（）=>
document.getElementById（“对象”）.style.backgroundColor='gray'
);
console.log（'sync'）；
});
异步函数tryCopyAsync（e）{
if（navigator.clipboard）{
等待e.clipboardData.setData（'text/plain'，getText（））；
}
}
函数sleepFor（sleepDuration）{
var now=new Date（）.getTime（）；
while（new Date（）.getTime（）

#对象{
宽度：100%；
高度：100vh；
背景：灰色；
}
身体{
填充：0；
保证金：0；
溢出：隐藏；
}
单击以触发该函数
我相信浏览器会批量更新DOM，但在UI线程可用之前，它无法开始重新绘制，而UI线程又会被
getText
和
sleepFor
函数阻止。请阅读微任务、宏任务和
requestAnimationFrame
。我将检查是否尝试包装
tryCopyAsync（e）。然后…
在一个
setTimeout中，没有任何第二个参数，它可以工作。但不知道到底发生了什么，这不是一个非常干净的解决方案。Felix Kling可能在这里走对了。是的，它可以工作，但我想知道为什么。单线程…..你的while循环不是真正的睡眠，它只是锁定了浏览器。我知道ly没有调用document.getElementById（“对象”）.style.backgroundColor='gray'；马上我编辑了我的代码，现在console.log可以工作了，但是背景仍然不能工作。@SethB你读到我的答案了吗？你既没有拆分getText方法并让它等待新的事件循环迭代，也没有将计算移动到工作进程。请阅读。我确实用l编辑了我的答案我举个例子。