Javascript：在用户完成滚动后执行操作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4289473/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript: do an action after user is done scrolling
提问by DavidR
I'm trying to figure out a way to do this. I have a list of boxes, each about 150pxhigh. I am using javascript (and jquery) and want that, after a user scrolls down a page, the page will auto scroll so that the boxes line up with the rest of the page (that is to say, if the user scrolls and the y position of the page is not divisible by 150, it will scroll to that nearest point).
我正试图找出一种方法来做到这一点。我有一个盒子清单，每个盒子都150px很高。我正在使用 javascript（和 jquery）并希望在用户向下滚动页面后，页面将自动滚动，以便框与页面的其余部分对齐（也就是说，如果用户滚动并且 y页面的位置不能被 150 整除，它将滚动到最近的点）。
Now, I at the moment, I know I can activate an event using the .scroll()jquery event, and I can make it move to a certain point using .scrollTop(). But every pixel the user moves the scroll bar activates the whole function. So is there a way to delay the function from firing until the user hasn't scrolled, and if they should begin to scroll again, the function will halt?
现在，我现在知道我可以使用.scroll()jquery 事件激活一个事件，并且我可以使用.scrollTop(). 但是用户移动滚动条的每个像素都会激活整个功能。那么有没有办法将函数从触发延迟到用户还没有滚动，如果他们应该再次开始滚动，该函数将停止？
回答by Felix Kling
As you are already using jQuery, have a look at Ben Alman's doTimeoutpluginwhich already handles the debouncingof methods (which is what you are after).
由于您已经在使用 jQuery，请查看Ben Alman 的doTimeout插件，该插件已经处理了方法的去抖动（这就是您所追求的）。
Example shamelessly stolen from his website:
从他的网站上无耻地窃取的示例：
$(window).scroll(function(){
$.doTimeout( 'scroll', 250, function(){
// do something computationally expensive
});
});
回答by lenooh
This is basically the same as ?ime Vidas' answer, but less complex:
这与 ?ime Vidas 的回答基本相同，但不那么复杂：
var scrollTimeout = null;
$(window).scroll(function(){
if (scrollTimeout) clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(function(){yourFunctionGoesHere()},500);
});
500 is the delay. Should be ok for mouse scroll.
500 是延迟。鼠标滚动应该没问题。
回答by Macy Abbey
Sure, in the event handler for the scroll event, fire off a setTimeout for 100 or 200 milliseconds later. Have that setTimeout function you set inside of the scroll event handler do the positioning logic you mention above. Also have the scroll event handler clear any timeouts set by itself. This way, the last time the scroll event fires, the setTimeout function will get to complete as the scroll event has not cleared it.
当然，在滚动事件的事件处理程序中，在 100 或 200 毫秒后触发 setTimeout。让您在滚动事件处理程序中设置的 setTimeout 函数执行您上面提到的定位逻辑。还让滚动事件处理程序清除其自身设置的任何超时。这样，最后一次触发滚动事件时，setTimeout 函数将完成，因为滚动事件尚未清除它。
回答by ?ime Vidas
The code:
编码：
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;
}
回答by Alan Mabry
This would be a scenario, where vanilla JavaScript would be useful.
在这种情况下，vanilla JavaScript 会很有用。
var yourFunction = function(){
// do something computationally expensive
}
$(window).scroll(function(){
yfTime=setTimeout("yourFunction()",250);
});
