SetInterval creates delay after many rounds of execution

Question

I have a problem with the implementation of setInterval. I have created a slider in which the setInterval processes a function every few seconds. I have noticed after few minutes and few rounds of the execution of setInterval an additional delay is incurring. Please suggest what seems to be the problem here?

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

There may be issue with Animation queue.

I also faced similar issue with Chrome or webkit browser. When using setInterval/setTimeout together with jQuery's .animate() function.

Open both Original and updated fiddle in two new tab and leave it for few mins and check again. You will get it updated code will animate smoothly which is used with stop

Working code

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

Use stop before fadeIn or fadeOut

Usefull link

The jQuery documentation (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, 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;
  }
}

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

If you need to clear the queue while using fadeIn or fadeOut (rather than the more generic animate function) you'll need to explicitly set both .stop() parameters to true.