选项卡处于非活动状态时,jQuery setInterval太快

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了选项卡处于非活动状态时,jQuery setInterval太快相关的知识,希望对你有一定的参考价值。

当我的网站打开的选项卡处于非活动状态时,我的幻灯片开始过快地切换图片并弄乱整个事情。

有没有办法解决这个问题?

var img_src = ["1.png", "2.png", "3.png", "4.png"];
var delay = 8000;
var first_run = true;

function switch_pic(position){
  $("#show").attr("src", img_src[position]).fadeOut(0).fadeIn(4000).fadeOut(4000);
}

$(document).ready(function(){
  var i = 0;
  if(first_run){
    switch_pic(i);
    first_run = false;
    i++;
  }
  window.setInterval(function(){
    switch_pic(i);
    delay += 8000;
    i++;
    if(i > 3){   
      i = 0;
      window.clearInterval();
    }
  }, delay);
});
答案

可以包装代码:

$(document).ready(function(){
    $([window, document]).focusin(function(){
       //code run when tab is selected
    }).focusin(function(){
       //code to stop all animation
    });
});

这只会让用户在查看您的网站时播放幻灯片。

另一答案

我不确定为什么事情会加速。通常,背景选项卡上的计时器将减慢至少一秒,但这不会影响您的方案。我建议使用console.log()来跟踪对函数的调用。

此外,您可以稍微简化主循环:

$(document).ready(function(){
  var i = 0;
  window.setInterval(function(){
    switch_pic(i++); // increase i after call
    if(i > 3) i = 0; // reset i
  }, 8000);
});
另一答案

我认为实际版本的jQuery的答案应该如下所示:

    var intervalId;

    $([window, document]).on('focusin', function(){
        intervalId = setInterval(function() {
            // Action in interval
        }, 3000);
    }).on('focusout', function(){
        if (intervalId) {
            clearInterval(intervalId);
        }
    });

请记住,第一次加载页面时你的'focusin'不会触发,所以你应该使用这种结构:

intervalFunction();

$([window, document]).on('focusin', function(){
    if (!intervalId){
        intervalFunction();
    }
}).on('focusout', function(){
    if (intervalId) {
        clearInterval(intervalId);
        intervalId = undefined;
    }
});

function intervalFunction() {
    // Your function hire
}

以上是关于选项卡处于非活动状态时,jQuery setInterval太快的主要内容,如果未能解决你的问题,请参考以下文章

当用户/选项卡/浏览器处于非活动状态时 JavaScript 播放声音

如果选项卡未处于活动状态,jqgrid 无法在 jquery-ui 选项卡下正确加载

在jquery中上传文件后设置当前选项卡处于活动状态

脚本无法在非活动选项卡上运行

仅在选项卡处于活动状态时加载数据?

Vuejs:当特定选项卡处于活动状态时是不是会发出事件(bootstrap-vue)