Question

我正在构建一个简单的Facebook标签。我有两个标签，在setInterval和JQuery的帮助下每3秒更换一次，直到用户与它们交互。他们取消了转换。

$(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上的iframe内时，这不起作用。谁有人建议解决方案？

Answer 1

尝试使用setTimeout而不是setInterval。

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

setTimeout(doStuff, timeout);

这样，你只需要在后台进行一次迭代，所以当用户切换回页面时它会立即闪烁一次（希望足够快，以至于他没有注意到）。

在Facebook iframe中使用Jquery，setInterval的问题

1 个答案: