ClearInterval does not stop the function with velocity.js stemming impulse starting with setInterval
I am using speed.js for pulse animation. I have simple code In html I have: XXXXXXXXXXX
In javascript:
var blinkNext = 0; // Global variable
var blinkBtn = function() {
$("div").velocity("callout.pulse");
};
blinkNext = setInterval(blinkBtn, 1);
clearInterval(blinkNext); // <-- Not working
Expected Behavior: The div section should pulsate and then stop. Problem: clearInterval doesn't stop impulses off. I searched a lot but found nothing
source to share
You have an interval set to just one millisecond, so you are calling .velocity()
every millisecond, and I assume these are queue calls. So when you clear the interval, the animation stops for a very long time.
Here's a jsfiddle that demonstrates the source code issue. Click "Run>" and then click the "Stop" button as quickly as you can. You can see how many times "blink" is written to the console log. That is, how many times the animation starts before it stops, but eventually it stops.
Instead of using, setInterval()
you can do the following:
var blinking = true;
function blink() {
$('#btnNext').velocity('callout.pulse', function() {
// This anonymous function is called when the animation completes.
// If we should be blinking, then we call blink() again.
if (blinking) {
blink();
}
});
}
// Initially start the animation.
blink();
// This button shows how you can stop and restart the animation.
$('#toggleBtn').click(function() {
blinking = !blinking;
if (blinking) {
blink();
}
});
source to share