如何在滾動停止時觸發ajax請求？

Question

在窗口滾動我做Ajax請求這樣

$(window).scroll(function(){ 
//doing ajax request 
}); 

但它創造了滾動事件的多個Ajax請求。是否有任何事件像onscrollstop或只在窗口滾動結束後觸發的事件。或者有什麼其他方式可以處理相同的情況。請建議。

Answer 1

我不相信有一個onscrollstop監聽器，但您可以通過設置超時並在滾動繼續時清除它來模擬它。

var timeout = null; 

$(window).scroll(function() { 
    clearTimeout(timeout); 
    timeout = setTimeout(function() { 
     // do your ajax request 
    }, 100); 
}); 

Answer 2

This question提供了一種解決方案。

另一種方式做到這一點，而不是一個計時器，是簡單地設置一個標誌，指示一個Ajax請求已經運行，並且什麼都不做，直到該標誌被原始請求清除。如果您希望ajax請求不會比任意頻率發生得更頻繁（例如不多於每5秒），您也可以在標誌清除後設置一個定時器。

Answer 3

您應該等待一段時間，並且只在沒有更多滾動事件發生時觸發請求。

var timer, // store a timeout reference 
    pendingAjax, // store the last AJAX request 
    scrollHandler = function() { 
     pendingAjax.abort(); // cancel the last request if it's still running 
     pendingAjax = $.ajax({...}); // start a new AJAX request 
    }; 

$(window).scroll(function() { // whenever the window is scrolled 
    clearTimeout(timer); // cancel the existing timer 
    timer = setTimeout(scrollHandler, 300); // and start a new one 
});