Javascript：用户完成滚动后执行操作答案

【问题标题】：Javascript: do an action after user is done scrollingJavascript：用户完成滚动后执行操作
【发布时间】：2010-11-27 00:47:22
【问题描述】：

我正在想办法做到这一点。我有一个盒子列表，每个盒子大约 150px 高。我正在使用 javascript（和 jquery）并希望在用户向下滚动页面后，页面将自动滚动，以便框与页面的其余部分对齐（也就是说，如果用户滚动并且 y页面的位置不能被 150 整除，它将滚动到最近的点）。

现在，我知道我可以使用.scroll() jquery 事件激活一个事件，我可以使用.scrollTop() 使它移动到某个点。但是用户移动滚动条的每个像素都会激活整个功能。那么有没有办法延迟函数触发，直到用户没有滚动，如果他们应该再次开始滚动，函数就会停止？

【问题讨论】：

标签： javascript jquery user-interface scroll

【解决方案1】：

由于您已经在使用 jQuery，请查看 Ben Alman's doTimeout plugin，它已经处理了 debouncing 的方法（这就是您所追求的）。

无耻地从他的网站窃取的示例：

$(window).scroll(function(){
   $.doTimeout( 'scroll', 250, function(){
      // do something computationally expensive
   });
});

【讨论】：

+1 不错的插件，而且只有 1k。去抖动应该包含在 jQuery 1.5 中:)
老兄。美丽而辉煌。我不认为我会喜欢这样的插件。
我希望有人实现了这个想法并且实际上取得了成功。谢谢！！
这是否考虑到iOS设备的减速？我看到滚动结束事件被触发，而滚动列表仍在减速并且没有完全停止。
@HetalVora：那么显然它没有。我不知道iOS中如何处理惯性滚动。

【解决方案2】：

这与 Šime Vidas 的回答基本相同，但不太复杂：

var scrollTimeout = null;
$(window).scroll(function(){
    if (scrollTimeout) clearTimeout(scrollTimeout);
    scrollTimeout = setTimeout(function(){yourFunctionGoesHere()},500);
});

500 是延迟。鼠标滚动应该没问题。

【讨论】：

【解决方案3】：

当然，在滚动事件的事件处理程序中，在 100 或 200 毫秒后触发 setTimeout。让您在滚动事件处理程序中设置的 setTimeout 函数执行您上面提到的定位逻辑。还要让滚动事件处理程序清除自己设置的任何超时。这样，最后一次触发滚动事件时，setTimeout 函数将完成，因为滚动事件尚未清除它。

【讨论】：

【解决方案4】：

代码：

var scrollTimeout = null;
var scrollendDelay = 500; // ms

$(window).scroll(function() {
    if ( scrollTimeout === null ) {
        scrollbeginHandler();
    } else {
        clearTimeout( scrollTimeout );
    }
    scrollTimeout = setTimeout( scrollendHandler, scrollendDelay );
});

function scrollbeginHandler() {
    // this code executes on "scrollbegin"
    document.body.style.backgroundColor = "yellow";
}

function scrollendHandler() {
    // this code executes on "scrollend"
    document.body.style.backgroundColor = "gray";
    scrollTimeout = null;
}

【讨论】：

【解决方案5】：

在这种情况下，原生 JavaScript 会很有用。

var yourFunction = function(){
  // do something computationally expensive
}

$(window).scroll(function(){
  yfTime=setTimeout("yourFunction()",250);
});

【讨论】：

1) $(window) 不是 JavaScript，它是 jQuery 并且 2) 这将为用户滚动的每个像素排队一组 setTimeouts...