使用jQuery循環來確定變量的值是否在任何給定時間發生了變化

Question

我正在嘗試編寫一些jQuery，它定義了一個名爲progressTracker的變量，它是一個名爲indicator的div id的內容。指標在任何時候，可以改變，這個div的內容將是1或2.如果數字是1，那麼我試圖添加一個「工作」類（它有一個load.gif的背景圖像），如果#indicator的值更改爲兩個，我需要添加一個基本顯示覆選標記的類（至今尚未編碼）。這工作，但它崩潰了我的瀏覽器哈哈。試圖描述我的問題時，請原諒我的任何無知。

var progressTracker = $("#indicator").text(); 
var doOnlyOnce = $(0); 

while (progressTracker==1) { 

    if (doOnlyOnce==0){     
     $('.statusIndicator').fadeIn('fast').addClass('working'); 
     var doOnlyOnce = $(1); 
    } 

} 

Answer 1

您可以嘗試使用遞歸setTimeout輪詢ü pdates：

(function progressTrackerPoll() { 
    var progressTracker = $("#indicator").text(); 
    if(progressTracker === '1') 
     $('.statusIndicator').fadeIn('fast').addClass('working'); 
    else 
     $('.statusIndicator').removeClass('working').addClass('check_mark'); 
    setTimeout(progressTrackerPoll,200); 
})(); 

它將每200毫秒輪詢一次更新。它也包含在Immediately Invoked Function Expression中，所以它不應該干擾你的任何其他代碼。它比setInterval好，因爲如果出現錯誤，它不會無休止地繼續，並且整體上對瀏覽器資源的密集程度會降低。

請確保避免使用while循環進行輪詢，因爲它們可能會導致阻塞，如果條件從未計算爲false，則可能會完全鎖定瀏覽器。

Answer 2

你這樣做太複雜了，並不是說它實際上不適合JS。

請考慮這一點。

// define new custom event 
    $(document).on('isWorking.my', function(e, flag) { 

    if (flag) 
      $('.statusIndicator').stop().fadeIn('fast').addClass('working') 
    else 
      $('.statusIndicator').stop().fadeOut('fast').removeClass('working') 
    }) 

    // now in every place you want to update if you are working or not 
    // instead of 
    $('#indicator').text(1) 

    // you are doing this to start working 
    $(document).trigger('isWorking.my', [1]) 
    // or this to stop 
    $(document).trigger('isWorking.my', [0])  

注意jQuery的事件，您可以通過額外參數到事件處理程序，語法如下：

// triggering event and passing params 
    $(obj).trigger('someEvent', [param1, param2, param3...]) 

    // handling event 

    $(obj).on('someEvent', function(e, param1, param2, param3) { 
     .... 
    }) 

您可以改進具有等多個標誌這一想法，但如果你真的有麻煩等着對於異步操作完成，如Ajax請求，你的真正的方法是使用承諾：

// two ajax operations 
    function loadCategories() { 
     return $.getJSON('/category') 
    } 

    function loadProducts() { 
     return $.getJSON('/product') 
    } 

    // something that should happen when both of them finished 
    function renderMyUI(categories, products) 

    // and kick off 
    $.when(loadCategories(), loadProducts()).done(renderMyUI) 

    // or a click event should kick it off 

    $('button.load').on('click', function() { 
     $.when(loadCategories(), loadProducts()).done(renderMyUI) 
    })