彙總/收集AJAX請求

我有一種情況，用戶可以通過使用表示爲複選框的一組過濾器來操縱大量數據（呈現在表格中）。彙總/收集AJAX請求

該頁面AJAXed了，因此用戶不必等到整個頁面刷新他們每次點擊過濾器。目前實現的方式是讓事件處理程序監視所有複選框，並在觸發單擊事件時從服務器請求過濾的數據。

這工作正常。然而，有做這樣一個可用性&性能問題。例如，如果用戶點擊複選框6，6個AJAX請求被觸發，他們都回來以不同的間隔導致網頁被更新6次。這很可能會讓用戶惱火，而且看起來效率很低。

我想提出一些超時的事件處理程序做這樣的事情：「等待1秒，如果沒有更多的過濾器點擊觸發的AJAX請求」。但是，目前我只能將所有6個請求延遲1秒。我不確定如何將過濾器信息聚合/收集到1個AJAX請求中。

任何建議，將不勝感激！

來源

2010-03-20 Ganesh Shankar

您是否使用jQuery'$ .ajax'，並且是被替換的內容？（例如最後一次請求返回，這就是顯示的內容） – 2010-03-20 12:46:20

@Nick是的。 – 2010-03-20 12:52:54

有「點擊」事件首先檢查是否有掛起的計時器。如果是這樣，點擊應該取消它，並啓動一個新的計時器。

(function() { 
    var timeout = null; 
    $('#yourForm').find('input:checkbox').click(function() { 
    clearTimeout(timeout); 
    timeout = setTimeout(function() { 
     doTheAjaxStuff(); 
    }, 500); 
    }); 
})();

喜歡的東西，這將意味着，直到用戶已經暫停了他們箱檢查半秒的野生狂潮，就會有再沒AJAX請求。一旦用戶暫停，請求應該傳輸當前狀態全部複選框，以便可以進行適當的更新。請注意，這意味着您可能需要更改服務器操作的工作方式，因爲您不會爲每個輸入單獨調用AJAX。

來源

2010-03-20 12:43:42 Pointy

謝謝，這工作得很好！我不必修改服務器操作，因爲它們已經處理了多個過濾器。僅供參考：cancelTimeout實際上是clearTimeout（感謝谷歌;）） – 2010-03-21 01:20:17

感謝您的更正 - 我會解決答案。我一直犯這個錯誤！ – Pointy 2010-03-21 02:23:38

您可以通過在你的第一個點擊事件設置一個標誌做到這一點，因此，只有一個計時器被啓動：

if (!ajaxRequestsPending) { 
    ajaxRequestsPending = true; 
    window.setTimeout(...); 
}

實際執行AJAX請求將重置標誌的代碼。

來源

2010-03-20 12:43:13 Ray

如果這就是你所追求的，jQuery有一些內置的功能。如果你只是存儲結果來更新頁面和use $.ajaxStop()。只有在沒有掛起的請求時纔會觸發，所以在最後一個請求完成之後。如果你連續射擊5次，那麼它們都會回到頂部，這會被調用一次，這似乎是你所追求的。

Description of .ajaxStop()：

每當一個Ajax請求完成後，jQuery的檢查是否還有其他優秀的Ajax請求。如果不存在，jQuery將觸發ajaxStop事件。任何和所有已在.ajaxStop()方法中註冊的處理程序都會在此時執行。

您可以使用它像這樣：

$(document).ajaxStop(function() { 
    $("#myPageElement").html($("#resultStore").html()); 
    $("#resultStore").empty(); //Cleanup 
});

在你的Ajax調用：

$.ajax({ 
    //Existing stuff... 
    success: function(data) { 
    $("#resultStore").html(data); 
    }); 
});

所以所有請求完整爲正常，我們只有一次在最後更新的內容，不知道如何變得更簡單:)這也有一個好處，如果任何請求失敗，最後一個成功的被用來更新頁面。

來源

2010-03-20 12:56:14

首先 - 嘗試使用jQuery Grid插件 - 某些列可以在客戶端進行排序。第二 - 也許你可以發送「確定」按鈕發送請求參數！？

來源

2010-03-20 13:06:29 user297994

彙總/收集AJAX請求

回答

相關問題