爲什麼我在jQuery中執行某些腳本之前無法將光標更改爲「progress」？

Question

我一直在努力弄清楚我在這裏做錯了什麼。我只是試圖在用戶點擊按鈕之後，但在循環HighStock中的一系列（需要幾秒鐘執行）並顯示/隱藏某些行（其中32行）之前，使用jQuery的.css()函數將光標更改爲「progress」 ！）。

我已經嘗試了很多東西，但無論我嘗試什麼，只要凍結「向下」位置的按鈕（不改變光標，但仍然可以移動它）直到代碼完成。

這是我已經試過（按順序）：

注：我所有的嘗試都產生同樣的結果（即沒有錯誤產生，代碼得到執行，但我從來沒有。在 「進步」 光標顯示，而代碼是忙碌的執行

$("#onAllOverall").click(function() { 
    $("body").css("cursor", "progress"); 

    for (var s = 0; s < series.length; s++) { 
     series[s].hide(); 
    } 

    $("body").css("cursor", "default"); 
}); 

那麼，我想：

$("#onAllOverall").click(function() { 
    $("body").css("cursor", "progress"); 
} 

$("#onAllOverall").click(function() { 
    for (var s = 0; s < series.length; s++) { 
     series[s].hide(); 
    } 

    $("body").css("cursor", "default"); 
}); 

我甚至竟然試圖去：

function progressCursor() { 
    $("body").css("cursor", "progress"); 
} 

$("#onAllOverall").click(function() { 

    $.when(progressCursor).done(function() { //also tried $.when.then(), but I admit I don't know much about these methods; 
     for (var s = 0; s < series.length; s++) { 
      series[s].show(); 
     } 
    }); 

    $("body").css("cursor", "default"); 
}); 

我記得我嘗試了一些其他的東西，但我不記得正確它們是什麼，但他們基本的和無益的。

我覺得有點傻，沒有什麼在這裏工作。我究竟做錯了什麼？

Answer 1

您需要將事件循環「屈服」到瀏覽器，以便在for循環中呈現頁面（包括光標更改）。

在瀏覽器中最容易產生的方式是setTimeout爲0 ms。 （具有的NodeJS一個名爲nextTick這實際上是你想要的功能，但瀏覽器都沒有實現它。）

$("#onAllOverall").click(function() { 
    $("body").css("cursor", "progress"); 
    var s = 0; 
    function next(){ 
     series[s].hide(); 
     s++; 
     if(s < series.length){ 
      setTimeout(next, 0); 
     } else { 
      $("body").css("cursor", "default"); 
     } 
    } 
    if(series.length){ 
     next(); 
    }   
}); 

的https://github.com/caolan/async庫是優秀的這些東西。

請注意，此實現在每個hide（）事件之後執行。你可能會發現它只用一個包裝for循環的set-timeout。在每次操作之後產生的效果會在循環發生時使頁面更具響應性，但也可能讓頁面看起來很奇怪，因爲每個元素一次會消失一個。

要讓每一個動作後，不屈服：

$("#onAllOverall").click(function() { 
    $("body").css("cursor", "progress"); 

    function action(){ 
     for (var s = 0; s < series.length; s++) { 
      series[s].hide(); 
     } 

     $("body").css("cursor", "default"); 
    } 
    setTimeout(action, 0);  
});