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?

Ultimo

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
}

Pericles

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. – Pericles

so if we call the clearInterval at 4 secs, will those 6 secs be used next time the setInterval function is called again? – Ultimo

No. The next time you start the interval again, it starts over. – Pericles

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? – Ultimo

Yes just call the function before you start the timer. Like this...jsfiddle.net/YgECf/1 – Pericles

Here is a better one. Had a bug in the previous one: jsfiddle.net/YgECf/2 – Pericles

Answer 2

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.

Essieessinger

Answer 3

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

Tarantass

He did define it outside, just don't use var inside the event handlers. – Dansby

Answer 4

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

Ermina

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. – Clipper