jQuery的问题，Facebook内部框架中的setInterval

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上的iframe中时，这不起作用。任何人都可以提出解决方案

Answer 1

尝试使用setTimeout而不是setInterval。

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

setTimeout(doStuff, timeout); 

这样，你只有一次迭代在后台准备，因此当用户切换回页面（希望速度不够快，他没有注意到），它会马上一次闪光。