How to stop toggling classes

Question

This is how I started toggling classes:

$(document).ready(function() {
    window.setInterval(function() {
        $('.blinkClass').toggleClass('blink');
    }, 500);  
});

How can I stop toggling these classes?

Answer 1

You need to store the timer returned from setInterval to a variable which you can then use in a call to clearInterval():

var timer = window.setInterval(function() {
    $('.blinkClass').toggleClass('blink');
}, 500);  

// later on, in a code block within scope of the above variable... 
clearInterval(timer);

Answer 2

You can do this :

$(document).ready(function() {
    var myVar  = window.setInterval(function() {
        $('.blinkClass').toggleClass('blink');
    }, 500); 

    //when you want     
    myStopFunction(myVar)
});

function myStopFunction(par) {
    clearInterval(par);
}

See more info at

setInterval

clearinterval