如何在滚动停止时触发ajax请求?

时间:2011-06-15 14:16:29

标签: jquery ajax scroll

在窗口滚动我正在做这样的ajax请求

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

但它正在为滚动事件创建多个ajax请求。是否有任何事件,如onscrollstop或只在窗口滚动结束后触发的事件。或者还有其他方法可以处理相同的场景。请建议。

3 个答案:

答案 0 :(得分:5)

我不相信有一个onscrollstop监听器,但您可以通过设置超时来模拟它,并在滚动继续时清除它。

var timeout = null;

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

答案 1 :(得分:1)

您应该等待一段时间,并且只有在没有更多滚动事件发生时才触发请求。

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
});

答案 2 :(得分:0)

This question提供了一种解决方案。

执行此操作的另一种方法,而不是计时器,只需设置一个标志,指示ajax请求已在运行,并且在原始请求清除该标志之前不执行任何操作。如果您希望ajax请求不会比某个任意频率更频繁地发生(例如,不超过每5秒一次),您也可以在清除该标志后设置一个计时器。