为什么这种阻塞方法会阻止css被更改？

Question

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);

}

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

asyncMethod运行正常。问题是阻塞方法似乎在更新鼠标光标之前转移到睡眠功能。

为什么要这样做，我将如何解决这个问题？

JSFiddle：https://jsfiddle.net/nLfza9vs/