stop setInterval while its running javascript

Question

I need to be able to stop a setInterval function while its running. The idea is if the browser is resized then it will the timer (320px or less) here is the interval:

var blurb_scroll = setInterval(function(){ 
        $(".content .blurb-container:first").next().css({'opacity':0}).delay(400).animate({'opacity':1}, 'fast');
        $(".content .blurb-container:first").animate({'margin-top':'-190px', 'opacity':'0'}, 'slow', function(){
            $(this).appendTo(blurb_container).removeAttr('style');
        });
    },6000);

@fogsy: Why didn't it work? What happened? Where did you call it? — SLaks
– SLaks, Commented Aug 29, 2013 at 17:33
What doesn't work? I see no attempt at using clearInterval(). — j08691
– j08691, Commented Aug 29, 2013 at 17:33
@fogsy Is that what you want to happen? Stop the interval and the animations? — Ian
– Ian, Commented Aug 29, 2013 at 17:41
@Ian .stop(); stopped the animation and resolved the issue thanks again — cppit
– cppit, Commented Aug 29, 2013 at 17:56

Saxophonist · Accepted Answer · 2013-08-29 17:46:11Z

1

You must use clearInterval. Put the variable with your setInterval as global, then you can stop it anywhere.

<html>
<body>

<input type="text" id="clock">
<script language=javascript>
var int=self.setInterval(function(){clock()},1000);
function clock() {
  var d=new Date();
  var t=d.toLocaleTimeString();
  document.getElementById("clock").value=t;
  }
</script>
</form>
<button onclick="int=window.clearInterval(int)">Stop</button>

</body>
</html>

Here you can find this example e much more info about clearInterval.

Hope it helps!

answered Aug 29, 2013 at 17:46

Saxophonist

7371 gold badge9 silver badges17 bronze badges

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

Comments

Ian · Accepted Answer · 2013-08-29 18:07:02Z

1

To stop the interval as well as the animations, you need to use clearInterval (on the interval id) and .stop() (on the elements).

For example:

clearInterval(blurb_scroll);
$(".content .blurb-container:first").stop();

answered Aug 29, 2013 at 18:07

Ian

51k13 gold badges104 silver badges111 bronze badges

Comments

pointnetdeveloper · Accepted Answer · 2013-08-29 18:12:03Z

1

You should use clearInterval and jquery .stop() function according to jquery documentation http://api.jquery.com/stop/

Also as jquery states, animations may be stopped globally by setting the property $.fx.off to true. When this is done, all animation methods will immediately set elements to their final state when called, rather than displaying an effect.

answered Aug 29, 2013 at 18:12

pointnetdeveloper

2241 gold badge3 silver badges7 bronze badges

Comments

Mike 'Pomax' Kamermans · Accepted Answer · 2013-08-29 18:12:41Z

0

Rather than clearing the setInterval interval, start using setTimeout instead:

(function runthis() {
  var f = $(".content .blurb-container:first")
  f.next()
   .css({'opacity':0})
   .delay(400)
   .animate({'opacity':1}, 'fast')
   .animate({'margin-top':'-190px', 'opacity':'0'}, 'slow', function(){
     $(this).appendTo(blurb_container).removeAttr('style');
   });
  if (conditional that says we should keep doing this) {
    setTimeout(runthis, 6000);
  }
}());

Now you have much finer control over what happens, and if your code has an error, at least it won't keep running your error code forever. If it dies on an error, you never schedule a new timeout.

setInterval. Just not a good idea.

answered Aug 29, 2013 at 18:12

Mike 'Pomax' Kamermans

54.3k17 gold badges133 silver badges182 bronze badges

Collectives™ on Stack Overflow

stop setInterval while its running javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related