JS: setInterval and blur.

Question

I have this:

$(window).blur(function() {
    setInterval(function() {
        $.ajax({
            type: "POST",
            url: "imback.php",
            data: {
                mode: 'ajax',
                getUpdates: 'auto',
            },
            success: function(msg){
                document.title = msg + titleOrig;
            }
        });
    }, 35000);

Works fine.

Although, if you have been blur, and then when you focus back, it will keep making the ajax call, it doesnt stop sending ajax call after interval 35 seconds.

How can i fix this? })

Answer 1

Looks like you need to clearInterval() on focus

Answer 2

You need to store the interval when you set it, and then clear it on window focus. Like this:

var interval = null;

$(window).blur(function() {
    if (interval) clearInterval(interval);
    interval = setInterval(function() {
        $.ajax({
            type: "POST",
            url: "imback.php",
            data: {
                mode: 'ajax',
                getUpdates: 'auto',
            },
            success: function(msg){
                document.title = msg + titleOrig;
            }
        });
    }, 35000);
});

$(window).focus(function() {
    if (interval) clearInterval(interval);
    interval = null;
});

Answer 3

Using a closure:

$(window).blur(function() {
    tracktime = new Date();
    var iVal = setInterval(function() {
        $.ajax({
            type: "POST",
            url: "imback.php",
            data: {
                mode: 'ajax',
                getUpdates: 'auto',
            },
            success: function(msg){
                document.title = msg + titleOrig;
            }
        });
    }, 2000);

    $(window).focus(function() { clearInterval(iVal); });
});

This allows you to not have to check if you've set the Interval before clearing it. And, it lets you ensure you're clearing the correct Interval instead of hoping no other call has overwritten your variable.