Javascript 如何在调用函数或执行其他操作之前更改背景色

我想在调用

testFunction（）

之前更改“lol”按钮的颜色

function testFunction（）{
对于（变量i=0；i<200；i++）{
控制台日志（i）；
}
返回0；
}
$（“按钮”）。单击（函数（）{
$（“按钮”）.css（“背景色”，“#6ddc5d”）；
testFunction（）；
});

lol
问题是因为您正在运行的循环是同步的。这会阻止UI线程更新您修改的背景颜色

要解决此问题，请在具有
0
延迟的超时内调用
testFunction（）
：


function testFunction（）{
对于（变量i=0；i<200；i++）{
控制台日志（i）；
}
返回0；
}
$（“按钮”）。单击（函数（）{
$（“按钮”）.css（“背景色”，“#6ddc5d”）；
setTimeout（testFunction，0）；
});

哈哈
我想你希望它单独执行。在这种情况下，您需要使其与setTimeout异步


function testFunction（）{
对于（变量i=0；i<200；i++）{
控制台日志（i）；
}
返回0；
}
$（“按钮”）。单击（函数（）{
$（“按钮”）.css（“背景色”，“#6ddc5d”）；
setTimeout（function（）{testFunction（）；}，0）；
});

lol
如果您不想使用超时，可以使用工作者。这将允许您运行比超时时间更长的重载长时间运行负载

注意1:这在所有浏览器中都有效，但在FireFox中似乎效果最好。

注意2:Edge在使用
createObjectURL
时抱怨内联脚本，因此外部脚本更好


//从内联脚本中获取工作进程
var blob=new blob（[document.querySelector（'#worker1'）.textContent]，{type:“text/javascript”}）
//获取工作程序的URL（可以使用外部文件）
var worker=new worker（window.URL.createObjectURL（blob））
//侦听来自工作人员的消息
//什么时候有人来处理它
worker.onmessage=函数（e）{
console.log（如数据）
}
//单击后，更改颜色，然后向工作人员发送消息
$（“按钮”）。单击（函数（）{
$（“按钮”）.css（“背景色”，“#6ddc5d”）
worker.postMessage（“”）
});

英雄联盟
//侦听来自主进程的消息
self.onmessage=函数（e）{
对于（变量i=0；i<2000；i++）{
//将消息发送回主进程
self.postMessage（一）
}
返回0；
}
。问题是什么？以防万一，这是一个基于时间的问题。Javascript不会等待背景色被重新绘制，然后继续处理。因此，它很可能会在浏览器有机会重新绘制/重绘之前通过您的循环。您已经在mac上进行了此操作。此操作在我的FF上进行，但在其他浏览器上可能不进行，您可以将函数调用设置为0。嘿，我编辑了我的问题，您也可以告诉我，如何解决问题的第二部分？没有函数的逻辑是相同的，只需将
for
循环包装在
setInterval（）
中即可。我帮你更新了答案哦，你照我说的做了。但我只提供了一个示例代码。我的原始代码非常大，我不能在这里提供它。在我的代码中，您的解决方案仅在70%左右的时间有效。有时候，事实并非如此。你知道为什么吗？浏览器有时会因为某些原因而忽略您的解决方案吗？或者无法加载某些内容？在这种情况下，请尝试延长延迟时间。尝试
25
而不是
0
。基本上，您需要设置延迟，以便在开始循环之前给UI足够的时间进行更新。在较慢的计算机上，您需要延迟的时间越长。已完成，非常感谢您提供了这么好的信息：）嘿，我编辑了我的问题，您能告诉我，如何解决问题的第二部分吗？