javascript - setInterval 'stacking' 向上

Question

使用 setInterval 运行一个函数，为列表提供“闪光”效果。

如果我保持页面打开，但访问另一个选项卡/10 分钟左右返回，则 setInterval 感觉就像每 1 秒工作一次，因为该函数不断被调用。

我觉得它随着时间的推移而堆积，无论如何要解决这个问题吗？

function flashListItems(){
  $('.imageview_navigation li').each(function(i) {
    $(this).delay((i++) * 100).fadeTo(200, 0.8).fadeTo(200, 1);
  });
}

setInterval(function(){
  flashListItems();
}, 10000);

fiddle :http://jsfiddle.net/6w6wrsm0/

Answer 1

您的代码没有任何问题，一些网络浏览器会减慢这些类型的间隔，以免导致太多使用。所以当不使用网页时，最快的间隔通常是1秒左右。

可能有一种方法可以解决这个问题，这里提到:

How can I make setInterval also work when a tab is inactive in Chrome?

Just make your animation function tick by real elapsed time.

var div = $('#my-div');
var leftValue = 0;
var interval = (1000/20); //20fps
var before = new Date();

setInterval(function()
{
    now = new Date();
    var elapsedTime = (now.getTime() - before.getTime());

    if(elapsedTime > interval)
    {
        //Recover the motion lost while inactive.
        leftValue += Math.floor(elapsedTime/interval);
    }
    else
    {
        leftValue++;
    }

    div.css("left", leftValue);
    before = new Date();    

}, interval);