Call function on scroll only once

Question

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?

Working example

My code so far:

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

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

Answer 1

Try using .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/

Answer 2

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.

 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

Caution: All answers here are using $(window).off('scroll'); which could effect your other scripts parts, like in my case my sticky nav stopped working. So I used a simple flag var to solve my issue.

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

Answer 5

when the $test is within in you screen, remove the event listener.

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