Question

I’m building a simple Facebook tab. I have two tabs that change every 3 seconds with with the help of setInterval and JQuery until the user interacts with them. Which them cancels the switching.

$(document).ready(function() {  

    $('#item2').hide();
    $('li#tab1').addClass('selected');

    var timer = setInterval(function () {
        $('div.item').fadeToggle('fast')
        $('li.tab').toggleClass('selected') ;
    }, 3000);   


    $(window).blur(function(){
        clearInterval(timer)
    })

    // setup. Set the first tab to selected
    $('li.tab').click(function(event) {
        clearInterval(timer);
        $('li.tab').toggleClass('selected') 
        $('div.item').fadeToggle('fast')
    });

});

This works fine… mostly. The problem occurs when I lose focus on the page for a while ( 2-3 minutes ) and switch back, the tabs switch back and forth very fast for a while before returning to normal. I am able to fix this issue if NOT in an iframe with:

$(window).blur(function(){
    clearInterval(timer)
})

which just stops the switch altogether. But this does not work when the page is inside a iframe on Facebook. Can anyone suggest a solution?

Answer 1

Try using setTimeout instead of setInterval.

function doStuff(){
    //do some stuff
    setTimeout(doStuff, timeout);
}

setTimeout(doStuff, timeout);

This way, you only have one iteration going in the background, so it’ll flash once immediately when the user switches back to the page (hopefully fast enough that he doesn’t notice).