Javascript 滚动调用函数仅一次
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32134451/
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
Call function on scroll only once
提问by Rotan075
I got a question regarding a function that will be called if the object is within my screen. But when the object is within my screen the function is been called and a alert is been fired. But if I close the alert and scroll further down the event is called again. I do not want that. How can I solve that?
我有一个关于如果对象在我的屏幕内将被调用的函数的问题。但是当对象在我的屏幕内时，该函数被调用并发出警报。但是，如果我关闭警报并进一步向下滚动，则会再次调用该事件。我不要那个。我该如何解决？
My code so far:
到目前为止我的代码：
<div id="wrapper">
scroll down to see the div
</div>
<div id="tester"></div>
JS
JS
$(window).on('scroll',function() {
if (checkVisible($('#tester'))) {
alert("Visible!!!")
} else {
// do nothing
}
});
function checkVisible( elm, eval ) {
eval = eval || "object visible";
var viewportHeight = $(window).height(), // Viewport Height
scrolltop = $(window).scrollTop(), // Scroll Top
y = $(elm).offset().top,
elementHeight = $(elm).height();
if (eval == "object visible") return ((y < (viewportHeight + scrolltop)) && (y > (scrolltop - elementHeight)));
if (eval == "above") return ((y < (viewportHeight + scrolltop)));
}
What I want is that the If function only will be called 1 time and not on every scroll if the object is visible.
我想要的是 If 函数只会被调用 1 次，如果对象可见，则不会在每次滚动时调用。
回答by Praveen Kumar Purushothaman
Try using .one():
尝试使用.one()：
$(window).one('scroll',function() {
// Stuff
});
Or, unlink the event inside:
或者，取消链接里面的事件：
$(window).on('scroll',function() {
// After Stuff
$(window).off('scroll');
});
Guess you might need this code:
猜你可能需要这个代码：
$(window).on('scroll',function() {
if (checkVisible($('#tester'))) {
alert("Visible!!!");
$(window).off('scroll');
} else {
// do nothing
}
});
Fiddle: http://jsfiddle.net/c68nz3q6/
回答by Amir Saleem
Let's try to solve your problem in javascript as all of the answers here are in jquery. You can use global variable as browser retains its value as long as the page is not refreshed. All those variables declared outside the function are called global variables and can be accessed by any function.
让我们尝试在 javascript 中解决您的问题，因为这里的所有答案都在 jquery 中。您可以使用全局变量，因为只要页面不刷新，浏览器就会保留其值。所有在函数外声明的变量都称为全局变量，可以被任何函数访问。
window.onscroll = myScroll;
var counter = 0; // Global Variable
function myScroll(){
var val = document.getElementById("value");
val.innerHTML = 'pageYOffset = ' + window.pageYOffset;
if(counter == 0){ // if counter is 1, it will not execute
if(window.pageYOffset > 300){
alert('You have scrolled to second div');
counter++; // increment the counter by 1, new value = 1
}
}
}#wrapper,#tester {
width: 300px;
height: 300px;
border: 1px solid black;
padding: 10px;
}
#wrapper p {
text-align: center;
}
#tester {
border: 1px solid crimson;
}
#value {
position: fixed;
left: auto;
right: 40px;
top: 10px;
}<p id = "value"></p>
<div id="wrapper">
<p>scroll down to div to see the alert</p>
</div>
<div id="tester"></div>回答by Brian Mayrose
$(window).on('scroll', function() {
if ($(document).scrollTop() >= $(document).height() / 100) {
$("#spopup").show("slow");
$(window).off('scroll');
} else {
$("#spopup").hide("slow");
}
});
function closeSPopup() {
$('#spopup').hide('slow');
}
worked for me
为我工作
回答by KaziJee
when the $test is within in you screen, remove the event listener.
当 $test 在您的屏幕中时，删除事件侦听器。
$(window).on('scroll',function() {
if (checkVisible($('#tester'))) {
alert("Visible!!!")
$(window).off('scroll');
} else {
// do nothing
}
});
