Question

大家好，我有这段代码可以更改幻灯片等多个图片

function test() {
   $(".topimg img").first().appendTo('.topimg').fadeOut(1000);
   $(".topimg img").first().fadeIn(1000);
   setTimeout(test, 7000);
}
test();

但是当我最小化浏览器或更改标签时，我有一个问题，当我回来图像变化太快。我怎么能解决这个问题，请修复此代码不要给我另一个用javascript或任何这个简单的

Answer 1

请尝试这个：

 function test() {
       $(".topimg img").first().appendTo('.topimg').fadeOut(1000);
       $(".topimg img").first().fadeIn(1000);
 }

 setTimeout(function(){test();}, 7000);

Answer 2

当标签不在视图中时，渲染暂停。暂停逻辑也是合适的，因此当页面再次进入视图时，浏览器不需要赶上事件。

Chrome页面可见性API：https://developers.google.com/chrome/whitepapers/pagevisibility
Firefox：https://developer.mozilla.org/en-US/docs/DOM/Using_the_Page_Visibility_API

我确信有很多方法可以在其他浏览器中检测到这一点，但我从未使用过这些，所以没有人想到这些。

Answer 3

您可以使用setInterval代替setTimeout。 setInterval将在每7000毫秒后调用测试。如果你想立即运行测试，你可以在setInteval之后调用它;

我添加了inteval变量来检查setInterval是否已经在运行，如果这样的话就不要调用setInterval。

   if(window.inteval){
      return
   }
    function test() {
       $(".topimg img").first().appendTo('.topimg').fadeOut(1000);
       $(".topimg img").first().fadeIn(1000);
    }
    if(!window.inteval){
         window.inteval = setInterval(test, 7000);
   }

您可以检查代码

   function test() {
       $(".topimg img").first().appendTo('.topimg').fadeOut(1000);
       $(".topimg img").first().fadeIn(1000);
       window.interval = setTimeout(test, 7000);
    }
   if( !window.interval){
       test();
   }

jquery简单的图像转换器

3 个答案: