jQuery stop loop on event

Question

I am just starting with jQuery, so be patient. How do I stop this blinking function on attempted window scroll or mouseenter? Thanks in advance!

http://jsfiddle.net/e2s8besv/1/

<p>blink me<p>

<style>p {display:none;}</style>

<script>
    (function( $ ) {
        $.fn.blink= function(speed) {
        $(this).fadeIn(speed).fadeOut(speed).blink(speed);
    };
}( jQuery));

$("p").blink(1500);
</script>

The code in the question is not like in the fiddle. The variable assignments breaks it in fiddle. Another problem is that with your current code, you will reach the maximum call stack rather quickly — Spokey
– Spokey, Commented Feb 18, 2015 at 19:56
Edited to direct to correct fiddle. I want the blink function to loop infinitely until an attempted window scroll or mouseenter. — pebd
– pebd, Commented Feb 18, 2015 at 19:59

balexandre · Accepted Answer · 2015-02-18 21:37:48Z

1

I would most likely do this, if you're learning jQuery and assuming, javascript as well...

HTML

<p class="hide blink">blink me<p>

Script

$(function() {

  objInt = setInterval(function() {
    $(".blink")
      .fadeTo('fast', 0.2)
      .fadeTo('fast', 0.5);
  }, interval);

  // stop on scroll (only works if there's actualy a scroll area)
  $( window ).scroll(function() {
    clearInterval(objInt);
  });

  // stop on mouseenter the paragraph tag
  $( ".blink" ).mouseenter(function() {
    clearInterval(objInt);
  });

});

var interval = 500, objInt;

live version in JsBin: http://jsbin.com/gajafokale/1/edit?html,js,output

answered Feb 18, 2015 at 21:37

balexandre

75.4k47 gold badges240 silver badges352 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

pebd Over a year ago

For others trying to accomplish something similar, I found that the animation speed within the setInterval loop is important, as well as the 'interval' value. The setInterval cannot be interrupted (stopped by clearInterval) while the animation is taking place, so it is beneficial to have fast animations and longer intervals. To set a time between setInterval loop starts, replace the 'interval' with a time (in milliseconds).

CodeGodie · Accepted Answer · 2015-02-18 21:15:40Z

1

I would use a boolean flag to check if the action is happening. I would also try to separate the code in functions so that you can reuse them later if needed. Try doing something like this:

HTML:

<p style="display:none">BLINK</p>
<button>STOP</button>

JS:

var blinking = false;

function blink(speed) {
    if (blinking) {
        $("p").fadeIn(speed, function() {
            $(this).fadeOut(speed);
            blink(speed);
        });
    }
}

function startBlink(speed) {
    blinking = true;
    blink(speed);
}

function stopBlink() {
    blinking = false;
}

$(document).ready(function(){//makes sure your code runs once the DOM has completely loaded.
    startBlink(1500);
    $('button').click(stopBlink);
});

edited Feb 18, 2015 at 21:15

answered Feb 18, 2015 at 20:51

CodeGodie

12.2k6 gold badges40 silver badges66 bronze badges

Comments

Paweł Tomkiel · Accepted Answer · 2015-02-18 20:59:33Z

-1

I would suggest something with boolean variable and without recursion (would be more CPU-friendly):

<p>blink me<p>

<style>p {display:none;}</style>
<button>Stop Blinking!</button>
<script>
    var isBlinkEnabled=true;
    (function( $ ) {
        $.fn.blink= function(speed) {
        while(isBlinkEnabled)
        {
            $(this).fadeIn(speed).fadeOut(speed);
        }
    };
}( jQuery));

$("p").blink(1500);
$("button").click(function(){
  isBlinkingEnabled=false;
})
</script>

answered Feb 18, 2015 at 20:59

Paweł Tomkiel

1,9842 gold badges21 silver badges39 bronze badges

Collectives™ on Stack Overflow

jQuery stop loop on event

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related