javascript – SetInterval在多轮执行后创建延迟

我对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

解决方法

动画队列可能存在问题.

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

在两个新标签中打开Original和updated小提琴并将其保留几分钟并再次检查.你会得到它更新的代码将动画平滑,与停止一起使用

Working code

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

在fadeIn或fadeOut之前使用stop

Usefull link

jQuery文档(source)：

Because of the nature of requestAnimationFrame(),you should never
queue animations using a setInterval or setTimeout loop. In order to
preserve cpu resources,browsers that support requestAnimationFrame
will not update animations when the window/tab is not displayed. If
you continue to queue animations via setInterval or setTimeout while
animation is paused,all of the queued animations will begin playing
when the window/tab regains focus. To avoid this potential problem,
use the callback of your last animation in the loop,or append a
function to the elements .queue() to set the timeout to start the next
animation.

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

});

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.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,0.37);
}

.fadeInSlide {
  animation: fadeInSlide 0.5s;
}

@-webkit-keyframes fadeInSlide {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<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>

如果您需要在使用fadeIn或fadeOut(而不是更通用的animate函数)时清除队列,则需要显式设置.stop()参数为true.

原文链接：https://www.f2er.com/js/157632.html

javascript – SetInterval在多轮执行后创建延迟

解决方法

猜你在找的JavaScript相关文章