SetInterval creates delay after many rounds of execution
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
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>上一篇: 在处理器生成的类中使用库