Question

我正在尝试为一组ajax调用构建一个加载栏。现在我正在同步进行，问题是样式更改只发生在同步调用集完成后。

这个小提琴说明了我的问题。 https://jsfiddle.net/cbwevtda/

$("button").on('click',function(d) {
    document.getElementById("myH2").style.color = "#ff0000";
    document.getElementById("myP").style.color = "magenta";
    sleep(3000);
    document.getElementById("myP2").style.color = "blue";
    document.getElementById("myDiv").style.color = "lightblue";
})

所有颜色仅在睡眠功能完成后更改。有没有办法将更改同步应用于样式？

Answer 1

您的代码正在同步运行。每行都是一个接一个地执行，必须等待上一行完成。主线等待“睡眠”。函数在继续执行代码中的下一行之前返回。

使用JavaScript，您应该尝试尽可能多地编写异步代码，以便不阻止主线程

您可以通过将示例更改为此来查看差异......

$("button").on('click',function(d) {
    document.getElementById("myH2").style.color = "#ff0000";
    document.getElementById("myP").style.color = "magenta";

    setTimeout(function() {
        sleep(3000);
    }, 10);

    document.getElementById("myP2").style.color = "blue";
    document.getElementById("myDiv").style.color = "lightblue";
})

这告诉JavaScript将一个匿名回调函数排队，该函数将在10ms过去后在第一个可能的实例上执行。

当你处理AJAX时，这不是一个问题，因为AJAX本质上是异步的，不会阻塞主线程。

由于同步通话，样式更改被推迟

1 个答案: