javascript - jquery简单的图像转换器

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