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?

Answer 1

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
}

Answer 2

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

Answer 3

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.