使用setInterval(）函数进行图像闪烁

Image flickering with setInterval() function

本文关键字：图像 闪烁 函数 setInterval 使用      更新时间：2023-09-26

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

var timeOut = 4000;
function showSlide() {
       //....script for showing image
}
function pauseSlide() {
        
   setInterval(function(){showSlide();}, timeOut);
                
}
jQuery(document).ready(function() {
        pauseSlide();
});

现在的问题是，当我更改浏览器选项卡，几分钟后再次返回到旋转木马浏览器，并且我看到旋转木马运行得比默认时间间隔快时，假设0时间间隔，图像将快速更改。请帮我解决这个问题。

您必须先去掉第一个间隔，然后再开始另一个间隔，或者您开始让多个间隔同时工作（即为什么您开始看到它运行得"更快"）

做这个

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();
});

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

也许这会有所帮助：当Chrome中的选项卡处于非活动状态时，我如何使setInterval也能工作？

图像更改速度快于预期可能表明您以某种方式对pauseSlide（）进行了多次调用。

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

相关文章：