Question

我制作了一个旋转木马并使用javascript setInterval()功能在旋转木马中以固定间隔旋转图像。这是我用过的脚本

var timeOut = 4000;

function showSlide() {
       //....script for showing image
}

function pauseSlide() {

   setInterval(function(){showSlide();}, timeOut);

}

jQuery(document).ready(function() {
        pauseSlide();
});

现在的问题是，当我更改浏览器选项卡并在几分钟后再次返回到轮播浏览器并且我看到轮播运行速度太快而不是默认时间间隔时，图像将快速更改假设为0时间间隔。请帮帮我怎样才能解决这个问题。

Answer 1

你必须在开始另一个间隔之前摆脱第一个间隔，或者你开始同时工作多个间隔（即为什么你开始看到它“更快”）

这样做

var timeOut = 4000;
var interval = 0;

function showSlide() {
       //....script for showing image
}

function pauseSlide() {

   clearInterval(interval);
   interval =  setInterval(function(){showSlide();}, timeOut);

}

jQuery(document).ready(function() {
    //NOW you can do multiple pauseSlide() calls
     pauseSlide();
     pauseSlide();
     pauseSlide();
     pauseSlide();
     pauseSlide();
});

Answer 2

据我所知，在较新版本的firefox和chrome中，后台选项卡将setTimeout和setInterval限制为1000毫秒以提高性能。所以我认为你的问题可能与此有关。

也许这会有所帮助：How can I make setInterval also work when a tab is inactive in Chrome?

Answer 3

图像更改速度超出预期可能表示您以某种方式调用pauseSlide（）。

document ready是你调用该函数的唯一地方吗？ showlide中的任何代码或触发文档就绪事件的任何地方？如果您在alert()中放置pauseSlide()，是否会弹出多次？

图像使用setInterval（）函数闪烁

3 个答案: