Stop a setInterval() from within another function

Question

My intial click the setInterval works great but once I click on another "container" I get weird behavior. I felt that clearInterval() at the beginning of each click event would do the job but it does not. What am I missing?

$('.container #audio1 div:first').on( "click", function() {
 setInterval(function() {
    $("#time").html(Math.round(sound.currentTime)+ ":00 / 31:00");
 }, 250);
})

$('.container #audio2 div:first').on( "click", function() {
 setInterval(function() {
    $("#time").html(Math.round(sound.currentTime)+ ":00 / 31:00");
 }, 250);
})

Try this http://stackoverflow.com/questions/109086/stop-setinterval-call-in-javascript — y--, Mar 11 '14 at 03:51

score 5 · Answer 1 · answered Mar 11 '14 at 03:51

Store a reference to the interval and clear it using clearInterval()

var interval;
$('.container #audio1 div:first').on("click", function () {
    clearInterval(interval);
    interval = setInterval(function () {
        $("#time").html(Math.round(sound.currentTime) + ":00 / 31:00");
    }, 250);
})

$('.container #audio2 div:first').on("click", function () {
    clearInterval(interval);
    interval = setInterval(function () {
        $("#time").html(Math.round(sound.currentTime) + ":00 / 31:00");
    }, 250);
})

Note: this will clear the previous interval if you click the same button twice, I think that is what you might need

That global var is what did it! Right in front of my face. Thanks Arun — pcproff, Mar 11 '14 at 04:03

Stop a setInterval() from within another function

1 Answers1