如何在滚动停止时触发 ajax 请求？答案

【问题标题】：How to trigger ajax request on scroll stop?如何在滚动停止时触发 ajax 请求？
【发布时间】：2011-06-15 14:16:29
【问题描述】：

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

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

但它正在为滚动事件创建多个 ajax 请求。是否有像 onscrollstop 这样的事件或仅在窗口滚动结束后触发的事件。或者有没有其他方法可以处理相同的情况。请提出建议。

【问题讨论】：

标签： jquery ajax scroll

【解决方案1】：

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

var timeout = null;

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

另一种方法，而不是计时器，是简单地设置一个指示 ajax 请求已经在运行的标志，并且在原始请求清除该标志之前什么都不做。如果您希望 ajax 请求的发生频率不超过某个任意频率（例如，不超过每 5 秒一次），您还可以在清除标志后设置一个计时器。

【讨论】：