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可能存在问题。

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

在两个新标签中打开Original和updated小提琴并保留几分钟，然后再次检查。您将获得更新的代码将平滑动画，与stop

一起使用

Working code

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

在stop或fadeIn

之前使用fadeOut

Usefull link

jQuery文档（source）：

由于requestAnimationFrame（）的性质，你永远不应该使用setInterval或setTimeout循环排队动画。为了保留CPU资源，支持requestAnimationFrame的浏览器不显示窗口/选项卡时，不会更新动画。如果您继续通过setInterval或setTimeout对动画进行排队动画暂停，所有排队的动画将开始播放当窗口/标签重新获得焦点时。为了避免这个潜在的问题，在循环中使用上一个动画的回调，或者附加一个函数.queue（）设置超时以启动下一个动画。

＆＃13;

$(document).ready(function() {
  var totalItems = $('.sliderItem', '#slider').length;
  var currentIndex = $('.itemActive').index() + 1;
  var slideTime = 3000;

  function goNext(e) {
    $('.sliderItem').eq(e).stop().fadeOut(500);
    $('.welcomeBox > .welcomeText1', '.sliderItem').eq(e).stop().hide(500);
    $('h1', '.sliderItem').eq(e).stop().hide(500);
    $('h2', '.sliderItem').eq(e).stop().hide(500);
    if (e == totalItems - 1) {
      e = 0;
    } else {
      e++;
    };
    $('.sliderItem').eq(e).stop().fadeIn(400);
    $('h1', '.sliderItem').eq(e).stop().delay(800).show(400);
    $('h2', '.sliderItem').eq(e).stop().delay(500).show(400);
    $('.welcomeBox > .welcomeText1', '.sliderItem').eq(e).stop().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);
      if (e == totalItems) {
        e = 1;
      } else {
        e++;
      };
      currentIndex = e;
    }, slideTime);

  };
  autoPlay(currentIndex);

});

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id='slider'>

  <div class='sliderItem itemActive'>
    <div class="welcomeBox row">
      <div class="col-md-4">
        <div class="">
          <h2 class="">ברוכים הבאים ל</h2>
          <h1 class=''>HOST<span>1</span></h1>
        </div>
      </div>
      <div class="welcomeText1 col-md-8">
        <div class=''>
          על מנת לספק את השירותים הללו באיכות הגבוהה ביותר אנו משתמשים בתשתיות האיכותית ביותר הן ברמת החומרה והן ברמת התוכנה. לא משנה על איזה מערכת אתה עובד אם השרת לא איכותי התוצאות בהתאם. לכן אנחנו לא מתפשרים וקונים את הרכיבים הטובים ביותר בשוק.
        </div>
      </div>
    </div>
  </div>



  <div class='sliderItem'>
    <div class="welcomeBox row">
      <div class="col-md-4">
        <div class="">
          <h2 class="">ברוכים הבאים ל</h2>
          <h1 class=''>HOST<span>2</span></h1>
        </div>
      </div>
      <div class="welcomeText1 col-md-8">
        <div class=''>
          על מנת לספק את השירותים הללו באיכות הגבוהה ביותר אנו משתמשים בתשתיות האיכותית ביותר הן ברמת החומרה והן ברמת התוכנה. לא משנה על איזה מערכת אתה עובד אם השרת לא איכותי התוצאות בהתאם. לכן אנחנו לא מתפשרים וקונים את הרכיבים הטובים ביותר בשוק.
        </div>
      </div>
    </div>
  </div>


  <div class='sliderItem'>
    <div class="welcomeBox row">
      <div class="col-md-4">
        <div class="">
          <h2 class="">ברוכים הבאים ל</h2>
          <h1 class=''>HOST<span>3</span></h1>
        </div>
      </div>
      <div class="welcomeText1 col-md-8">
        <div class=''>
          על מנת לספק את השירותים הללו באיכות הגבוהה ביותר אנו משתמשים בתשתיות האיכותית ביותר הן ברמת החומרה והן ברמת התוכנה. לא משנה על איזה מערכת אתה עובד אם השרת לא איכותי התוצאות בהתאם. לכן אנחנו לא מתפשרים וקונים את הרכיבים הטובים ביותר בשוק.
        </div>
      </div>
    </div>
  </div>


</div>





<div class='container'>
  <div class='itemSelectors'></div>
</div>



<div class="clouds"></div>
<div class='ms-nav-prev'></div>
<div class='ms-nav-next'></div>
<div class='loader'></div>

＆＃13;

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

SetInterval在多轮执行后创建延迟

1 个答案: