幻灯片setinterval的问题

Posted 2023-04-24

var slideTimer = null;
returnsetInterval();
$(slideId).hover(function()
// 鼠标经过时清除循环播放动作
if (slideTimer)
clearInterval(slideTimer);
slideTimer=null;
;
, function()
returnsetInterval();
).trigger("mouseleave");

function returnsetInterval()
if (slideTimer)
return;

slideTimer = setInterval(function()
showSlide(slideIndex);
slideIndex++;//位置自增1
// 如果幻灯片播放到最后一个，则从头开始播放
if (slideIndex == slideLen)
slideIndex = 0;
;
,slideStopTime);

如今出现了这样一个问题，我这里有一个幻灯片，加载网页的时候 死活就是不自动切换。 鼠标经过一次幻灯片区域之后，才开始能自动切换。刚才试着找了一下。 貌似是在网页加载的时候setinterval不执行。因为在returnsetInterval方法里面的setinterval里面加个alert没有弹窗。但是 只要鼠标进入然后移除该区域，立马就会有弹窗并且切换图片。 求大神指教一下 。 必要的话可以联系企鹅。
想实现的效果是 鼠标悬停在幻灯片区域的时候 ，暂停切换。移开，继续切换动作。 但现在就是 一开始就不切换 必须得经过一次该区域才能正常切换

参考技术A 尽量使用setTimeout来代替setInterval
下面是个例子，加入你计划每1000毫秒执行一次

function start()
(function()
var before = new Date().getTime();
//在这是你的执行的命令
xxxxxx
var delay = 1000-(new Date().getTime()-before);
setTimeout(arguments.callee,delay);

)();


使用setInterval不太好控制,一旦出错不容易结束。追问

不，大神， 咱先看看setinterval的呗。这弄明白了我在看看setTimeout行不。你先给我看看这个呗。 原因就是在页面加载的时候 setinterval没执行。 怎么能让他页面一加载就执行。不用鼠标经过一下的

选项卡处于非活动状态时，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
}