javascript 仅在滚动时触发一次函数（scrollstop）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16873352/
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
Only fire a function once on scroll (scrollstop)
提问by Naemy
So, I'd like to fire a function only once on scroll (using Scrollstop, given by a stackoverflow answer)
所以，我只想在滚动时触发一个函数（使用Scrollstop，由 stackoverflow 给出的答案）
The problem is that I don't get to fire the function only once. I've tried different solutions ( .on(), setting a counter, setting it outside/inside the window.scrollstop function) but nothing worked.
问题是我不能只触发一次函数。我尝试了不同的解决方案（.on()，设置一个计数器，将它设置在 window.scrollstop 函数的外部/内部）但没有任何效果。
I don't think it's difficult, but.. I didn't get to make it work so far.
我认为这并不难，但是.. 到目前为止我还没有让它发挥作用。
Here's the plugin I'm using
这是我正在使用的插件
$.fn.scrollStopped = function(callback) {
$(this).scroll(function(){
var self = this, $this = $(self);
if ($this.data('scrollTimeout')) {
clearTimeout($this.data('scrollTimeout'));
}
$this.data('scrollTimeout', setTimeout(callback,300,self));
});
};
and here's my code:
这是我的代码：
$(window).scrollStopped(function(){
if ($(".drawing1").withinViewport()) {
doNothing()
}
})
var doNothing = function() {
$('#drawing1').lazylinepainter('paint');
}
(removed the counter since it didn't work)
（删除了计数器，因为它不起作用）
PS: the function I'd like to make happen only once is the lazyPaint. It begins when we scroll to the element but it fires once again when it ends.
PS：我只想发生一次的功能是lazyPaint。它在我们滚动到元素时开始，但在结束时再次触发。
采纳答案by AddiktedDesign
how about using a variable to see whether it was previously fired:
如何使用变量来查看它之前是否被触发：
var fired = 0;
$.fn.scrollStopped = function(callback) {
$(this).scroll(function(){
if(fired == 0){
var self = this, $this = $(self);
if ($this.data('scrollTimeout')) {
clearTimeout($this.data('scrollTimeout'));
}
$this.data('scrollTimeout', setTimeout(callback,300,self));
fired = 1;
}
});
};
回答by Henry Zhu
Here's my version of having a function fire once while listening to the scroll event:
这是我在收听滚动事件时触发一次函数的版本：
var fired = false;
window.addEventListener("scroll", function(){
if (document.body.scrollTop >= 1000 && fired === false) {
alert('This will happen only once');
fired = true;
}
}, true)
回答by Jeemyeong Lee
How about this solution?
这个解决方案怎么样？
function scrollEvent() {
var hT = $('#scroll-to').offset().top,
hH = $('#scroll-to').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
if (wS > (hT+hH-wH)){
console.log('H1 on the view!');
window.removeEventListener("scroll", scrollEvent);
}
}
window.addEventListener("scroll", scrollEvent);
