Question

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

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

Answer 1

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

从他的网站上无耻地偷走的例子：

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

Answer 2

这与ŠimeVidas的答案基本相同，但不那么复杂：

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

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

Answer 3

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

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

Answer 5

这将是一个场景，其中vanilla JavaScript会很有用。

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

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

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

5 个答案: