Javascript jquery简单图像转换器

大家好，我有这个代码来更改多个图像，如幻灯片

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

但是，当我最小化浏览器或更改选项卡以及返回图像更改过快时，我有一个问题。我如何解决这个问题，请修复此代码？不要给我另一个带有javascript或其他任何东西的代码。这是一个简单的代码。

请尝试此代码：

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

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

---

当选项卡不在视图中时，渲染将暂停。暂停逻辑也是合适的，这样当页面再次进入视图时，浏览器就不需要跟踪事件

• Chrome页面可见性API：
• Firefox的：

---

我确信在其他浏览器中也有检测到这种情况的方法，但我从未使用过，所以我不会想到这些方法。

您可以使用

setInterval

而不是

setTimeout

。

setInterval

将在每7000毫秒后调用test。如果您想立即运行测试，您可以在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功能已就绪。就绪