CODEWITHSUNDEEP
javascriptjquery
Anonymous Man
Anonymous Man

Reputation: 3056

how to stop this jquery setInterval function

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");

Upvotes: 1

Views: 2393

Answers (6)

Marco Salerno
Marco Salerno

Reputation: 5203

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" );

Upvotes: 3

Ffloriel
Ffloriel

Reputation: 488

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

Upvotes: 1

trincot
trincot

Reputation: 350270

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.

Upvotes: 0

Achik Rien
Achik Rien

Reputation: 1

var variable = setInterval(examplefunction, 10000);

clearInterval(variable);

Upvotes: 0

rasmeister
rasmeister

Reputation: 1996

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.

Upvotes: 0

Anish Goyal
Anish Goyal

Reputation: 2859

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).

Upvotes: 0

Related Questions