我有一个带有“无限滚动”的页面。它计算页面末尾和当前页面之间的差异，如果差异足够小，则加载更多内容。使用 jQuery 的代码是这样的：
$(window).on('scroll', function() {
if (window.pageYOffset > loadMoreButton.offsetTop - 1000)
# load more content via ajax
}
现在，问题是每次我滚动时，每次滚动都会多次触发此事件。我最多希望每 x 毫秒触发一次。我该怎么做？
解决这个问题的一种方法是定义一个时间间隔，并且在该时间间隔内只处理一次滚动事件。如果在该时间间隔内出现多个滚动事件，则忽略它并仅在该时间间隔过去后处理它。
var scrollTimer, lastScrollFireTime = 0;
$(window).on('scroll', function() {
var minScrollTime = 100;
var now = new Date().getTime();
function processScroll() {
console.log(new Date().getTime().toString());
}
if (!scrollTimer) {
if (now - lastScrollFireTime > (3 * minScrollTime)) {
processScroll(); // fire immediately on first scroll
lastScrollFireTime = now;
}
scrollTimer = setTimeout(function() {
scrollTimer = null;
lastScrollFireTime = new Date().getTime();
processScroll();
}, minScrollTime);
}
});
这将立即触发第一个滚动事件，然后在滚动条移动时大约每 100 毫秒触发一次滚动事件，然后在滚动条停止移动后触发一个最终事件。您可以通过将参数更改为setTimeout（当前设置为 100）来调整事件的频率。
这里有一个演示：http : //jsfiddle.net/jfriend00/EBEqZ/你需要打开一个调试控制台窗口，开始移动内容窗口中的滚动条，然后在调试控制台窗口中观察每个滚动事件的时间. 在我的 Chrome 版本中，它们的最小间隔设置为 100 毫秒，它们似乎每 100-200 毫秒发生一次。
jQuery 的创建者 John Resig 有一个很酷的解释来解决这种情况。
var outerPane = $details.find(".details-pane-outer"),
didScroll = false;
$(window).scroll(function() {
didScroll = true;
});
setInterval(function() {
if ( didScroll ) {
didScroll = false;
// Check your page position and then
// Load in more results
}
}, 250);
var isWorking = 0;
$(window).on('scroll', function()
{
if(isWorking==0)
{
isWorking=1;
if (window.pageYOffset > loadMoreButton.offsetTop - 1000)
# load more content via ajax
setTimeout(function(){isWorking=0},1000);
}
}
var now = new Date().getTime();
$(window).scroll( function () {
if (window.pageYOffset > loadMoreButton.offsetTop - 1000)
{
if (new Date().getTime() - now > 1000)
{
console.log("Task executed once per second");
now = new Date().getTime();
}
}
});
或者
您可以使用节流函数调用： throttling-function-calls
function throttle(fn, threshhold, scope) {
threshhold || (threshhold = 250);
var last,
deferTimer;
return function () {
var context = scope || this;
var now = +new Date,
args = arguments;
if (last && now < last + threshhold) {
// hold on to it
clearTimeout(deferTimer);
deferTimer = setTimeout(function () {
last = now;
fn.apply(context, args);
}, threshhold);
} else {
last = now;
fn.apply(context, args);
}
};
}
你可以这样称呼它：
$('body').on('mousemove', throttle(function (event) {
console.log('tick');
}, 1000));