jQuery函數在后台運行？

Question

我有一個頁面，上面有很多元素（〜1,500個），並且執行時

$(".pickrow").addClass("vis");

頁面需要一兩秒鍾才能反映出更改。 為了使用戶不會認為頁面被卡住，我想使用以下命令彈出一則小消息：

$("#msgDiv").show();
$(".pickrow").addClass("vis");
$("#msgDiv").hide();

但是msgDiv永遠不會顯示。 如果我刪除$("#msgDiv").hide(); msgDiv與添加的類的應用程序同時出現（添加類花費了1或2秒鍾之后）。

似乎jQuery函數已合並並一起運行，而沒有任何屏幕更新，直到它們全部完成為止。

如何在$(".pickrow").addClass("vis");出現時顯示$(".pickrow").addClass("vis"); 正在處理嗎？

這是一個演示

Answer 1

您可能希望將皮革延遲幾秒鍾。

$("#msgDiv").show();
$(".pickrow").addClass("vis");
setTimeout(function(){ $("#msgDiv").hide(); },2000);

或使用jQuery的動畫隊列進行計時：

$("#msgDiv").show();
$(".pickrow").addClass("vis");
$("#msgDiv").delay(2000).hide(1); //must make it at least 1 ms to go into the queue

Answer 2

您也可以使用這種方法

工作演示

$(document).on("click",".btn",function(){
    $(".msg").show("fast",function(){
        $(".pickrow").addClass("vis");
   var interval = setInterval(function(){

        var picLength = $(".pickrow").length;
        var visLength = $(".vis").length;

        if(picLength == visLength){
            clearInterval(interval);
            $(".msg").hide();
        }

    },500);
});

}）;

Answer 3

我認為，如果您簡化代碼，則會發現它的響應速度更快，並且可能不需要加載消息。 在代碼中，檢查if語句中的每個元素。 您可以檢查一個值，然后相應地更新所有值，而不是這樣做。

這是一個演示： http : //jsfiddle.net/jme11/3A4qU/

我對您的HTML進行了一次更改，將輸入按鈕的初始值設置為“顯示詳細信息”。 然后，在下面的代碼中，您可以僅檢查該值是否為Show Details，並刪除隱藏.pickrow的類並將按鈕的值更新為“ Hide Details”（無論如何，這對於用戶來說是更好的反饋）。 同樣，如果按鈕值不是“顯示詳細信息”，則可以將.hid類添加到拾取行。 不管是否單獨隱藏或顯示了某些類，這還將標准化所有類。

$('#showhide').on('click', function(){
    if ($(this).val() === 'Show Details') {
        $('.pickrow').removeClass('hid');
        $(this).val('Hide Details');
    } else {
        $('.pickrow').addClass('hid');
        $(this).val('Show Details');
    }    
});