1

I want to fire a popup when the user scrolls to a specific element id from my website.

At the moment I manages to do this, but it works in a loop and I can't stop the function after it was executed one time.

Follows my JS code:

$(window).scroll(function() {
 var executed = false;
  if (!executed){ 
  executed = true;
      var hT = $('#scroll-to').offset().top,
      hH = $('#scroll-to').outerHeight(),
      wH = $(window).height(),
      wS = $(this).scrollTop();
   if (wS > (hT+hH-wH)){
   <!--
     window.setTimeout('window.location="javascript:showSuccessToast();"; ',2000);
     // -->
  }}
  });

I can't understand why the function executes, when "executed" variable becomes true. How can i manage it to fire only one time showsuccessToast ?

Ricardo Rocha
  • 14,612
  • 20
  • 74
  • 130
George L.
  • 37
  • 1
  • 6
  • Possible duplicate of [Function in javascript that can be called only once](http://stackoverflow.com/questions/12713564/function-in-javascript-that-can-be-called-only-once) – Abdullah A Malik Nov 04 '16 at 10:40
  • 1
    `$(window).one("scroll", function() { ... });` No need to handle this yourself. – Frédéric Hamidi Nov 04 '16 at 10:41
  • 1
    @Frederic, but point to a piece of doc, so he can follow. http://api.jquery.com/one/ – arhak Nov 04 '16 at 10:44
  • `window.setTimeout('window.location="javascript:showSuccessToast();"; ',2000);` ... what? Why not just `setTimeout(showSuccessToast, 2000)`? – JJJ Nov 04 '16 at 10:46

3 Answers3

2

Your function executes from scratch every time the event is fired - this includes the initialization of executed. So in other words, every time your function runs, you're setting executed back to false!

To fix this, you need to pull the variable definition outside of the function:

var executed = false;

$(window).scroll(function() {
    if (!executed) { 
        executed = true;

        ...
    }
});
Joe Clay
  • 33,401
  • 4
  • 85
  • 85
  • now it fires only when i reload the page and the id is present in the window :( if i scroll from the top to the id, it doesn't fire – George L. Nov 04 '16 at 11:00
  • @GeorgeL. You'll have to move the `executed = true` line to the place that you want to execute only once. Probably in this case inside the if block. – JJJ Nov 04 '16 at 11:08
  • but it is in the if block – George L. Nov 04 '16 at 11:09
  • I mean the `if (wS > (hT+hH-wH)){` block. If that doesn't work either, the problem is in the rule logic. – JJJ Nov 04 '16 at 11:15
  • Yeah, I agree with @JJJ - you probably want to move the line where you set `executed` to true to right after your success toast gets triggered. – Joe Clay Nov 04 '16 at 12:24
2

Another option would be to use unbind() as the following JS code shows:

$(window).scroll(myScrollFunction);
function myScrollFcuntion()
{
    // do things
    $(window).unbind("scroll", myScrollFunction);
}
Ricardo Rocha
  • 14,612
  • 20
  • 74
  • 130
Steve TheGreat
  • 51
  • 5
1

The var executed is always set false when the scroll event happens. Which means it is useless in your function.

Put the executed out of the event function should work.

   var executed = false;
$(window).scroll(function() {
  var hT = $('#scroll-to').offset().top,
  hH = $('#scroll-to').outerHeight(),
  wH = $(window).height(),
  wS = $(this).scrollTop();
 if (wS > (hT+hH-wH)){
if (!executed){ executed = true;
     <!--
     window.setTimeout('window.location="javascript:showSuccessToast();"; ',20);
     // -->
 }}
 });
George L.
  • 37
  • 1
  • 6
ZeroZerg
  • 427
  • 3
  • 14