Проблема с Jquery, setInterval внутри фрейма Facebook

Question

Я создаю простую вкладку Facebook. У меня есть две вкладки, которые меняются каждые 3 секунды с помощью setInterval и JQuery, пока пользователь не взаимодействует с ними. Который их отменяет переключение.

$(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')
    });

});

Это прекрасно работает ... в основном. Проблема возникает, когда я на некоторое время теряю фокус на странице (2-3 минуты) и переключаюсь назад, вкладки переключаются назад и вперед очень быстро, прежде чем вернуться в нормальное состояние. Я могу решить эту проблему, если НЕ в iframe с:

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

, который просто останавливает выключатель в целом. Но это не работает, когда страница находится внутри фрейма в Facebook. Кто-нибудь может предложить решение?

Answer 1

Попробуйте использовать setTimeout вместо setInterval.

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

setTimeout(doStuff, timeout);

Таким образом, у вас есть только одна итерация, идущая в фоновом режиме, поэтому она мигнет один раз сразу, когда пользователь вернется на страницу (надеюсь, достаточно быстро, чтобы он не заметил).