如何停止此jQuery setInterval函数

Question

I have a timer function that, when it gets below 1 minute, calls this function to flash certain text. (based on this jsfiddle: http://jsfiddle.net/8yned9f9/5/ )

$(document).ready(function(){
                setInterval(function(){
                    $('.flash').toggleClass('active');
                }, 500);
            });

After the minute expires, I need to STOP toggling the class and leave it with .active turned off. I'm unsure how to do this.

Keep in mind that there is a js window.setInterval timer that must continue to run, only the jquery call should stop.

UPDATE

Based on some answers here I have added a variable so I can call clearInterval(flash)

flash = setInterval(function(){
                            $('.flash').toggleClass('active');
                        }, 500);

That works as far as stopping the interval from firing. But it stops in the wrong state. Is there a way to then remove the .active class after stopping the interval?

Update 2, solved removing the class with a quick search.

document.getElementById("seconds").classList.remove("active");

Answer 1

You need to assign your interval to a variable and use the variable to stop it with clearInterval

var variable = setInterval(examplefunction, 10000);

clearInterval(variable);

Edit:

To remove the class, you need to do this:

$("yourelement").removeClass( ".active" );

Answer 2

The setInterval function returns an interval id to be used in the case you want to stop the interval function. You can stop it by using the id as a parameter to the function clearInterval .

In your example:

$(document).ready(function(){
    var intervalId = setInterval(function(){
        $('.flash').toggleClass('active');
    }, 500);
    // stop after 60 seconds
    setTimeOut(function() {
        clearInterval(intervalId);
    }, 60000)
});

The setInterval function belongs to the window object and is not related to jquery. You can find more information about setInterval here

Answer 3

setInterval() returns an id. save this id somewhere in a global variable of some sort.

Let's say you saved it to a variable "interval". You can then stop the interval by calling clearInterval(interval) .

Answer 4

Simplest would be to just add a condition in your script:

$(document).ready(function () {
  var count = 1;
  setInterval(function () {
    if (count < 120) {
      $('.flash').toggleClass('active');
      count++;
    }
  }, 500);
});

However, it is unclear to me why you would want the setInterval to continue if it does nothing.

Answer 5

var variable = setInterval(examplefunction, 10000);

clearInterval(variable);

Answer 6

You could set another timer to deal with it after one minute, like this:

 $(document).ready(function(){ var id = setInterval(function(){ $('.flash').toggleClass('active'); }, 500); setTimeout(function () { clearInterval(id); // stop the setInterval $('.flash').addClass('active'); // make sure active is ON. }, 6000); // after 6 seconds (make this one minute if you want) }); 

 .flash {color: red} .flash.active {color: black} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="flash">Hello</div> 

For illustration purposes the flashing stops after 6 seconds. Adapt as needed.