jQuery的，出列的ajaxQueue

我使用ajaxQueue的例子Queueing something like Ajax Calls提到：jQuery的，出列的ajaxQueue

// jQuery on an empty object, we are going to use this as our queue 
var ajaxQueue = $({}); 
$.ajaxQueue = function(ajaxOpts) { 
    // Hold the original complete function. 
    var oldComplete = ajaxOpts.complete; 
    // Queue our ajax request. 
    ajaxQueue.queue(function(next) { 
     // Create a complete callback to fire the next event in the queue. 
     ajaxOpts.complete = function() { 
      // Fire the original complete if it was there. 
      if (oldComplete) { 
       oldComplete.apply(this, arguments); 
      } 
      // Run the next query in the queue. 
      next(); 
     }; 
     // Run the query. 
     $.ajax(ajaxOpts); 
    }); 
};

我也有一個功能，使AJAX調用，並將結果追加到一個div（簡體）：

function ajaxCall() { 
    $.ajaxQueue({ 
     type: "POST", 
     url: myURL, 
     async: true, 
     cache: false, 
     success: function(result) { 
      $('#divID').append($('<div/>').html($(result).html()).fadeIn(200)); 
     } 
    }); 
}

然後通過Ajax調用click事件我環路（簡體）：

$("#btn").on("click", function() { 
    // (???) Dequeue the ajaxQueue 
    $('#divID').html(''); // Clear current results 
    for(var i=0; i<15; i++) { 
     ajaxCall(); 
    } 
});

問題
如果用戶在隊列仍在運行時單擊鏈接，則會添加一個新的ajax調用隊列，從而產生比預期更多的結果。在新的循環開始之前，我需要清除點擊隊列。

這裏是jsFiddle Demo。非常感謝任何建議。

來源

2013-05-27 m.spyratos

因此，當用戶第二次點擊鏈接時，第一次點擊已經檢索到的結果會發生什麼？ –

@rahulmaindargi我只想結果被清除（刪除）。 –

使用clearQueue：

ajaxQueue.clearQueue();

編輯

的問題是有可能仍然是被稱爲Ajax請求。

所以，你可能要保持當前請求的跟蹤：

currentRequest = $.ajax(ajaxOpts);

並中止這一次清除隊列時：

if (currentRequest) { 
    currentRequest.abort(); 
}

見http://jsfiddle.net/4AQ9N/6/

來源

2013-05-27 14:45:49 sroes

謝謝。我已經嘗試過，但仍然有一些先前的結果是遺漏的。在我提供的jsFiddle例子中，如果你添加了這段代碼，然後快速點擊三次鏈接，結果會達到42，而不是40。你可以嘗試一下，讓我知道嗎？ –

@ m.spyratos查看我的編輯 – sroes

非常感謝！這確實有效！我認爲jQuery Docs應該提到這... –

你需要

ajaxQueue.queue("fx", []); // fx is defualt queue Name.

見DEMO

success: function(result) { 
      if(num!=0){ 
       $('#divID').append($('<div/>').html('Result '+num).fadeIn(300)); 
      } 
      num++; 
     } 

$("#btn").on("click", function(e) { 
    e.preventDefault(); 
    if(ajaxQueue.queue().length>0){ 
     num = 0; 
     ajaxQueue.queue("fx", []); 
    }else{ 
     num = 1; 
    } 
    $('#divID').html(''); // Clear current results 



    for(var i=0; i<40; i++) { 
     ajaxCall(); 
    } 

});

在這裏，你可能會看到一張額外的輸出...即。達到41，但它不是因爲排隊不工作...當你Clear the queue有一個ajax調用已經放置...並等待響應。隊列完成後收到響應。

我已經添加了更新的代碼與一些num值hack。它將在大多數時間工作。

來源

2013-05-27 14:59:54

謝謝......我使用'ajaxQueue.clearQueue（）;'獲得了相同的結果。如果您快速點擊鏈接3次，結果將上升到42（每增加一次點擊就會留下前一個結果）。你認爲用'$（'＃divID'）。html（''）;'清除以前的內容是有問題的嗎？ –

謝謝你的幫助！你說得對已經放置的阿賈克斯電話... –

嗯......'num'只是一個虛擬值來展示我的問題。結果實際上是真實的內容。 sroes解決方案工作正常。再次感謝你... –

jQuery的，出列的ajaxQueue

回答

相關問題