Call function to scroll only once

Question

I have a question regarding a function that will be called if the object is on my screen. But when the object is on my screen, the function is called and a warning is called. But if I close the warning and scroll further, the event will be raised again. I do not need this. How can i solve this?

Working example

My code is:

<div id="wrapper"> scroll down to see the div </div> <div id="tester"></div> 

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

I want the If function to be called only 1 time, and not on every scroll if the object is visible.

Answer 1

Try using .one() :

 $(window).one('scroll',function() { // Stuff }); 

Or cancel 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/

Answer 2

Try to solve your problem in javascript, as all answers here are given in jquery. You can use a global variable since the browser retains its value until the page refreshes. All these variables declared outside the function are called global variables and can be accessed by any function.

 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> 

Answer 3

 $(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

Answer 4

use name function

 function fname() { } $(window).on('scroll',fname); $(window).off('scroll',fname); 

Answer 5

when the test $ is inside the screen, remove the event listener.

 $(window).on('scroll',function() { if (checkVisible($('#tester'))) { alert("Visible!!!") $(window).off('scroll'); } else { // do nothing } });