Javascript 为什么这种阻塞方法会阻止更改css？ 函数睡眠（毫秒）{ var startTime=new Date（）.getTime（）；//获取当前时间 while（new Date（）.getTime（）0）？'wait'：'auto'）； } 函数阻塞方法（）{ setBusy（真）； //css在这里不会改变。 log（“启动阻塞方法”）； 睡眠（5000）； 控制台日志（“阻塞完成”）； 挫折（假）； } 函数asyncMethod（）{ setBusy（真）； log（“启动异步方法”）； setTimeout（函数（）{ log（“异步完成”）； 挫折（假）； },5000); }

我试图模拟我遇到的代码气味问题，为此我需要展示阻塞和非阻塞方法的代码风格

异步方法工作得很好。问题是，阻塞方法似乎在更新鼠标光标之前转移到sleep函数

它为什么这样做，我将如何解决它

---

JSFiddle:

CSS确实发生了变化。只是在脚本尚未完成时，浏览器选择不渲染。解决方案很简单：使用异步方法。浏览器在同一线程中运行JS和屏幕重绘，并且在当前执行的JS函数完成之前不进行任何屏幕重绘。这是有道理的，因为如果一个JS函数多次更改DOM，那么在函数完成后重新绘制几次而不是一次将是低效的。@Bergi我使用的一些库调用被阻塞了。这是一个演示一般问题的模型。@Bergi您如何知道CSS正在更改，但浏览器没有重新绘制？这仅仅是标准的脚本行为吗？@Adjit:是的，这是标准行为（浏览器不想为DOM的每一次更改重新绘制）。通过从DOM检索CSS，您可以轻松地检查CSS是否已更改。

function sleep(milliSeconds){
    var startTime = new Date().getTime();                    // get the current time
    while (new Date().getTime() < startTime + milliSeconds); // hog cpu until time's up
}

var busyCount = 0;    
function setBusy(bool){

    busyCount += (bool)? 1 : -1;

    $('body').css('cursor', (busyCount > 0 ) ? 'wait':'auto');

}    

function blockingMethod(){
    setBusy(true);
    //css doesn't change inbeweeen here. 
    console.log("starting blocking method");
    sleep(5000);
    console.log("blocking complete");


    setBusy(false);
}

function asyncMethod(){
    setBusy(true);
    console.log("starting async method");
    setTimeout(function(){
        console.log("async complete");
        setBusy(false);
    },5000);

}