SetInterval creates a delay after many rounds of execution

Question

I have a problem implementing setInterval. I created a slider in which setInterval processes the function every few seconds. I noticed that after a few minutes and several rounds of setInterval execution, an additional delay occurs. Please suggest what is 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

Perhaps the problem is with the Animation queue .

I also ran into a similar issue with Chrome or webkit . When using setInterval / setTimeout together with jQuery .animate() function.

Open both the Original and the updated violin in two new tabs and leave them for a few minutes and check again. You will get updated code that will smoothly animate, which is used with stop

Working code

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

Use stop before fadeIn or fadeOut

Useful link

JQuery documentation ( source ):

Due to the nature of requestAnimationFrame (), you should never queue using a setInterval or setTimeout loop. To conserve processor resources, browsers supporting requestAnimationFrame will not update the animation when a window / tab is not displayed. If you continue animation queues through setInterval or setTimeout while the animation is paused, all animation queues will start playing when the window / tab regains focus. To avoid this potential problem, use the callback of your last animation in the loop or add a function for .queue () elements to set a 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 when using fadeIn or fadeOut (and not a more general animation function), you need to explicitly set both parameters .stop () parameters to true.