jQuery - How to restart setInterval after killing it off with clearInterval?

Question

I want to create a page with 2 buttons, 'STAY' and 'Leave'. There is an iFrame underneath the buttons. When the page loads for the first time, the iFrame starts refreshing automatically after 10 secs. When the user hits STAY button, it will stop refreshing. After that if he hits LEAVE button the iFrame will again start refreshing after 10 secs. I'm using this code:

$(document).ready(function() {
    var refreshIntervalId = setInterval( "update()", 10000 );

    $('#leave').click(function () {
        var refreshIntervalId = setInterval( "update()", 10000 );;
    })

    $('#stay').click(function () {
        clearInterval(refreshIntervalId);
    })
});

function update(){
    var url = "load.php";
    $('iframe#ifrm').attr('src', url);
}

<div id="bar">
    <div class= "button" id="stay">
    <a>Stay</a>
    </div>
    <div class= "button" id="leave">
    <a>Leave</a>
    </div>
</div>

but it doesn't work, am I using clearInterval in the wrong way?

score 14 · Accepted Answer · answered Feb 13 '11 at 20:37

14

I think you need to pull the set interval id outside of the function scope.

var refreshIntervalId;
$('#leave').click(function () {
        refreshIntervalId = setInterval( update, 10000 );
        })
$('#stay').click(function () {
           clearInterval(refreshIntervalId);
        })
});

Maybe some validation checking on the refreshIntervalId variable also...

if(refreshIntervalId!=null){
   // Do something with the interval id
}

answered Feb 13 '11 at 20:37

rcravens

8,320
2
33
26

It stops the interval timer. The 'setInterval' starts an interval timer that calls the 'update' function every 10 seconds. The 'clearInterval' call stops that timer. – rcravens Feb 13 '11 at 20:44
so if we call the clearInterval at 4 secs, will those 6 secs be used next time the setInterval function is called again? – Bilbo Baggins Feb 13 '11 at 20:47
No. The next time you start the interval again, it starts over. – rcravens Feb 13 '11 at 20:49
when I stop the setInterval by clicking on STAY and then hit the LEAVE button, it takes 10 secs for the iFrame to refresh. Is there any way to cause it to refresh as soon as I hit LEAVE? – Bilbo Baggins Feb 13 '11 at 20:55
Yes just call the function before you start the timer. Like this...http://jsfiddle.net/YgECf/1/ – rcravens Feb 13 '11 at 20:56
Here is a better one. Had a bug in the previous one: http://jsfiddle.net/YgECf/2/ – rcravens Feb 13 '11 at 20:59

score 2 · Answer 2 · answered Aug 02 '12 at 12:32

It's a scope issue. That means that wherever you put the "var" at defines what functions have access to the variable. If you define the variable outside of all of the functions like in Tricker's example, any function in your document has access to that value.

Tricker's example previously posted:

var refreshIntervalId = null;

$('#leave').click(function () {
    refreshIntervalId = setInterval( "update()", 10000 );
})
$('#stay').click(function () {
   clearInterval(refreshIntervalId);
})

Sometimes the whole document doesn't need to have access to the variable, so you want to put it inside of a function.

score 1 · Answer 3 · answered Feb 13 '11 at 20:39

1

First of all you can't define a variable in the #leave click function and use it in the #stay click function.

Use it like this:

var refreshIntervalId = null;

$('#leave').click(function () {
    refreshIntervalId = setInterval( "update()", 10000 );
})
$('#stay').click(function () {
   clearInterval(refreshIntervalId);
})

answered Feb 13 '11 at 20:39

Yoram de Langen

5,391
3
24
31

2

He did define it outside, just don't use `var` inside the event handlers. – JCOC611 Feb 13 '11 at 20:41

score 0 · Answer 4 · edited Jul 07 '23 at 08:18

class Interval {

    intervalId;

    constructor(protected intervalTime: number) {
    }

    start() {
        let setting = 'up';
        let i = 0;
        this.intervalId = setInterval(() => {
            messageContainer.classList.add('dragging');
            messageContainer.scrollTop = i;
            if (setting === 'up') i++;
            else i--;
            console.log(i);
            if (i <= 0) {
                setting = 'up';
            }
            if (i > (message.length * messageHeight)) {
                setting = 'down';
            }
        }, this.intervalTime);
    }

    clear() {
        clearInterval(this.intervalId);
    }
}

const intervalT = new Interval(10);

intervalT.start();
intervalT.clear();

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Jul 07 '23 at 00:40

jQuery - How to restart setInterval after killing it off with clearInterval?

4 Answers4

Linked