SetInterval在多轮执行后创建延迟

Question

我对setInterval的实现有问题.我创建了一个滑块,其中setInterval每隔几秒就会处理一个函数.我注意到几分钟后几轮执行setInterval会产生额外的延迟.请在这里建议看似什么问题？

    $(document).ready(function() {
    var totalItems = $('.sliderItem', '#slider').length;
    var currentIndex = $('.itemActive').index() + 1;
    var slideTime = 3000;




    function goNext (e) {
        $('.sliderItem').eq(e).fadeOut(500);    
        $('.welcomeBox > .welcomeText1', '.sliderItem').eq(e).hide(500);
        $('h1', '.sliderItem').eq(e).hide(500);
        $('h2', '.sliderItem').eq(e).hide(500);
        if( e == totalItems - 1) {
                e = 0;
            } else {
                e++;
            };
        $('.sliderItem').eq(e).fadeIn(400);
        $('h1', '.sliderItem').eq(e).delay(800).show(400);
        $('h2', '.sliderItem').eq(e).delay(500).show(400);
        $('.welcomeBox > .welcomeText1', '.sliderItem').eq(e).delay(300).show(400);
        currentIndex = e;
    };


  function loader() {
        $('.loader').animate({"width":"100%"}, slideTime - 199);
        $('.loader').animate({"opacity":"0"}, 199);
        $('.loader').animate({"width":"0%"}, 0);
        $('.loader').animate({"opacity":"1"}, 0);
    };


      function autoPlay (e){
      timer = setInterval(function() { 
      loader();
      goNext(e - 1); 
      console.log(e);
        if( e == totalItems ) {
            e = 1;
            } else {
            e++;
        };
        currentIndex = e;
      }, slideTime);

      };

    autoPlay(currentIndex);


});

https://codepen.io/Sizoom/pen/ayjNog

Answer 1

可能有问题Animation queue。

\n\n

我也遇到了类似的问题Chrome或webkit浏览器。当将 setInterval/setTimeout 与 jQuery 的.animate()函数一起使用时。

\n\n

在两个新选项卡中打开原始和更新的小提琴，并将其保留几分钟，然后再次检查。您将得到更新的代码，该代码将平滑地动画化，与以下命令一起使用stop

\n\n

工作代码

\n\n

$(\'.sliderItem\').eq(e).stop().fadeOut(500);\n

\n\n

stop在之前fadeIn或之前使用fadeOut

\n\n

有用的链接

\n\n

jQuery 文档（来源）：

\n\n

\n

由于 requestAnimationFrame() 的性质，您绝对不应该使用 setInterval 或 setTimeout 循环对动画进行排队。为了节省 CPU 资源，支持 requestAnimationFrame 的浏览器在窗口/选项卡未显示时不会更新动画。如果在动画暂停时继续通过 setInterval 或 setTimeout 对动画进行排队，则当窗口/选项卡重新获得焦点时，所有排队的动画将开始播放。为了避免这种潜在的问题，\n 使用循环中最后一个动画的回调，或者向元素 .queue() 附加一个\n 函数来设置启动下一个\n 动画的超时。

\n

\n\n

\r\n

\r\n

$(\'.sliderItem\').eq(e).stop().fadeOut(500);\n

\r\n

$(document).ready(function() {\r\n  var totalItems = $(\'.sliderItem\', \'#slider\').length;\r\n  var currentIndex = $(\'.itemActive\').index() + 1;\r\n  var slideTime = 3000;\r\n\r\n  function goNext(e) {\r\n    $(\'.sliderItem\').eq(e).stop().fadeOut(500);\r\n    $(\'.welcomeBox > .welcomeText1\', \'.sliderItem\').eq(e).stop().hide(500);\r\n    $(\'h1\', \'.sliderItem\').eq(e).stop().hide(500);\r\n    $(\'h2\', \'.sliderItem\').eq(e).stop().hide(500);\r\n    if (e == totalItems - 1) {\r\n      e = 0;\r\n    } else {\r\n      e++;\r\n    };\r\n    $(\'.sliderItem\').eq(e).stop().fadeIn(400);\r\n    $(\'h1\', \'.sliderItem\').eq(e).stop().delay(800).show(400);\r\n    $(\'h2\', \'.sliderItem\').eq(e).stop().delay(500).show(400);\r\n    $(\'.welcomeBox > .welcomeText1\', \'.sliderItem\').eq(e).stop().delay(300).show(400);\r\n    currentIndex = e;\r\n  };\r\n\r\n\r\n  function loader() {\r\n    $(\'.loader\').animate({\r\n      "width": "100%"\r\n    }, slideTime - 199);\r\n    $(\'.loader\').animate({\r\n      "opacity": "0"\r\n    }, 199);\r\n    $(\'.loader\').animate({\r\n      "width": "0%"\r\n    }, 0);\r\n    $(\'.loader\').animate({\r\n      "opacity": "1"\r\n    }, 0);\r\n  };\r\n\r\n\r\n  function autoPlay(e) {\r\n    timer = setInterval(function() {\r\n      loader();\r\n      goNext(e - 1);\r\n      if (e == totalItems) {\r\n        e = 1;\r\n      } else {\r\n        e++;\r\n      };\r\n      currentIndex = e;\r\n    }, slideTime);\r\n\r\n  };\r\n  autoPlay(currentIndex);\r\n\r\n});

\r\n

body {\r\n  background: black;\r\n}\r\n\r\n#slider {\r\n  position: relative;\r\n  width: 100%;\r\n  height: 100%;\r\n  color: #FFF;\r\n  padding: 30px;\r\n}\r\n\r\n#slider a {\r\n  color: #FFF;\r\n}\r\n\r\n.sliderItem {\r\n  position: absolute;\r\n  /* background: rgba(0, 0, 0, 0.28); */\r\n  display: none;\r\n  width: 100%;\r\n  padding: 57px;\r\n  margin: 0;\r\n}\r\n\r\n.sliderItem .welcomeText1 {\r\n  display: none;\r\n}\r\n\r\n.sliderItem h1,\r\n.sliderItem h2,\r\n.sliderItem h3,\r\n.sliderItem>.welcomeBox>.welcomeText {\r\n  display: none;\r\n}\r\n\r\n.itemActive {\r\n  display: block;\r\n}\r\n\r\n.itemSelectors {\r\n  position: absolute;\r\n  bottom: 0;\r\n  display: block;\r\n}\r\n\r\n.itemSelectors>.selector {\r\n  background: #FFF;\r\n  color: #3b7cbc;\r\n  font-size: 18px;\r\n  line-height: 40px;\r\n  text-align: center;\r\n  font-weight: bold;\r\n  width: 40px;\r\n  height: 40px;\r\n  border-radius: 50%;\r\n  display: inline-block;\r\n  margin: 0 0 0 10px;\r\n  cursor: pointer;\r\n}\r\n\r\n.activeSelect {\r\n  background: #3a3a3a !important;\r\n  color: #FFF !important;\r\n  pointer-events: none;\r\n}\r\n\r\n.ms-nav-prev {\r\n  width: 30px;\r\n  background: url(https://xhosting.co.il/libraries/themes/xhosting/js/masterslider/skins/default/light-skin-1.png);\r\n  background-position: -89px -103px;\r\n  height: 40px;\r\n  cursor: pointer;\r\n  top: 50%;\r\n  right: 30px;\r\n  left: auto;\r\n  position: absolute;\r\n  z-index: 110;\r\n}\r\n\r\n.ms-nav-next {\r\n  width: 30px;\r\n  background: url(https://xhosting.co.il/libraries/themes/xhosting/js/masterslider/skins/default/light-skin-1.png);\r\n  background-position: -89px -26px;\r\n  height: 40px;\r\n  cursor: pointer;\r\n  top: 50%;\r\n  left: 30px;\r\n  position: absolute;\r\n  z-index: 110;\r\n}\r\n\r\n.loader {\r\n  position: absolute;\r\n  top: 0;\r\n  width: 0;\r\n  height: 10px;\r\n  background: rgba(255, 255, 255, 0.37);\r\n}\r\n\r\n.fadeInSlide {\r\n  animation: fadeInSlide 0.5s;\r\n}\r\n\r\n@-webkit-keyframes fadeInSlide {\r\n  0% {\r\n    opacity: 0;\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n  }\r\n}

\r\n

\r\n

\r\n

\n\n

如果您需要在使用 fadeIn 或 fadeOut（而不是更通用的动画函数）时清除队列，则需要将两个 .stop() 参数显式设置为 true。

\n