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
Animation queue
可能存在问题。
我也面临类似的问题与Chrome
或webkit
浏览器。 将setInterval / setTimeout与jQuery的.animate()
函数一起使用时。
在两个新选项卡中打开原始和更新的小提琴,并将其保留几分钟并再次检查。 你会得到它的更新代码将顺利进行动画,这与stop
工作代码
$('.sliderItem').eq(e).stop().fadeOut(500);
在fadeIn
或fadeOut
之前使用stop
有用的链接
jQuery文档(来源):
由于requestAnimationFrame()的本质,您不应该使用setInterval或setTimeout循环对动画进行排队。 为了保留CPU资源,当窗口/选项卡不显示时,支持requestAnimationFrame的浏览器不会更新动画。 如果在动画暂停时继续通过setInterval或setTimeout排队动画,则当窗口/选项卡重新获得焦点时,所有排队的动画将开始播放。 为了避免这种潜在的问题,可以在循环中使用最后一个动画的回调函数,或者在元素中添加一个函数.queue()来设置超时以开始下一个动画。
$(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>
链接地址: http://www.djcxy.com/p/97079.html
上一篇: SetInterval creates delay after many rounds of execution
下一篇: How do I declare a function parameter to accept functions that throw?