我刚刚制作了具有以下样式的图像幻灯片：
几秒钟后移动的图像。
单击某些圆形按钮时，转到相应的图像。
单击左右箭头时，转到下一张图像。
幻灯片可以正常工作。但是，当在网上冲浪大约3分钟后，我回到系统选项卡，并且滑块的移动速度比正常情况快得多时，就会发生问题。使它恢复正常的唯一方法是更新页面。
我留下代码看是否有错误：
HTML：
<!--=====================================
SLIDESHOW
======================================-->
<div class="container-fluid" id="slide">
<div class="row">
<!--=====================================
SLIDESHOW
======================================-->
<ul>
<?php
$servidor = Ruta::ctrRutaServidor();
$slide = ControladorSlide::ctrMostrarSlide();
foreach ($slide as $key => $value) {
$estiloImgProducto = json_decode($value["estiloImgProducto"], true);
$estiloTextoSlide = json_decode($value["estiloTextoSlide"], true);
$titulo1 = json_decode($value["titulo1"], true);
$titulo2 = json_decode($value["titulo2"], true);
$titulo3 = json_decode($value["titulo3"], true);
echo '<li>
<img src="'.$servidor.$value["imgFondo"].'">
<div class="slideOpciones '.$value["tipoSlide"].'">';
if($value["imgProducto"] != ""){
echo '<img class="imgProducto" src="'.$servidor.$value["imgProducto"].'" style="top:'.$estiloImgProducto["top"].'%; right:'.$estiloImgProducto["right"].'%; width:'.$estiloImgProducto["width"].'%; left:'.$estiloImgProducto["left"].'%">';
}
echo '<div class="textosSlide" style="top:'.$estiloTextoSlide["top"].'%; left:'.$estiloTextoSlide["left"].'%; width:'.$estiloTextoSlide["width"].'%; right:'.$estiloTextoSlide["right"].'%">
<h1 style="color:'.$titulo1["color"].'">'.$titulo1["texto"].'</h1>
<h2 style="color:'.$titulo2["color"].'">'.$titulo2["texto"].'</h2>
<h3 style="color:'.$titulo3["color"].'">'.$titulo3["texto"].'</h3>';
if($value["boton"] != ""){
echo '<a href="'.$value["url"].'">
<button class="btn btn-default backColor text-uppercase">
'.$value["boton"].' <span class="fa fa-chevron-right"></span>
</button>
</a>';
}
echo '</div>
</div>
</li>';
}
?>
</ul>
<!--=====================================
PAGINATION
======================================-->
<ol id="paginacion">
<?php
for($i = 1; $i <= count($slide); $i++){
echo '<li item="'.$i.'"><span class="fa fa-circle"></span></li>';
}
?>
</ol>
<!--=====================================
ARROWS
======================================-->
<div class="flechas" id="retroceder"><span class="fa fa-chevron-left"></span></div>
<div class="flechas" id="avanzar"><span class="fa fa-chevron-right"></span></div>
</div>
</div>
<center>
<button id="btnSlide" class="backColor">
<i class="fa fa-angle-up"></i>
</button>
</center>
JS
/*=============================================
VARIABLES
=============================================*/
var item = 0;
var itemPaginacion = $("#paginacion li");
var interrumpirCiclo = false;
var imgProducto = $(".imgProducto");
var titulos1 = $("#slide h1");
var titulos2 = $("#slide h2");
var titulos3 = $("#slide h3");
var btnVerProducto = $("#slide button");
var detenerIntervalo = false;
var toogle = false;
$("#slide ul li").css({"width":100/$("#slide ul li").length + "%"})
$("#slide ul").css({"width":$("#slide ul li").length*100 + "%"})
/*=============================================
INITIAL ANIMATION
=============================================*/
$(imgProducto[item]).animate({"top":-10 +"%", "opacity": 0},100)
$(imgProducto[item]).animate({"top":30 +"px", "opacity": 1},600)
$(titulos1[item]).animate({"top":-10 +"%", "opacity": 0},100)
$(titulos1[item]).animate({"top":30 +"px", "opacity": 1},600)
$(titulos2[item]).animate({"top":-10 +"%", "opacity": 0},100)
$(titulos2[item]).animate({"top":30 +"px", "opacity": 1},600)
$(titulos3[item]).animate({"top":-10 +"%", "opacity": 0},100)
$(titulos3[item]).animate({"top":30 +"px", "opacity": 1},600)
$(btnVerProducto[item]).animate({"top":-10 +"%", "opacity": 0},100)
$(btnVerProducto[item]).animate({"top":30 +"px", "opacity": 1},600)
setTimeout(function(){
$(btnVerProducto[item]).mouseover(function(){
$(this).css({"background":"#3CB484"});
})
$(btnVerProducto[item]).mouseout(function(){
$(this).css({"background":"#35A679"});
})
},100)
/*=============================================
PAGINATION
=============================================*/
$("#paginacion li").click(function(){
item = $(this).attr("item")-1;
movimientoSlide(item);
})
/*=============================================
MOVE FORWARD
=============================================*/
function avanzar(){
if(item == $("#slide ul li").length -1){
item = 0;
}else{
item++
}
interrumpirCiclo = true;
movimientoSlide(item);
}
$("#slide #avanzar").click(function(){
avanzar();
})
/*=============================================
BACK
=============================================*/
$("#slide #retroceder").click(function(){
if(item == 0){
item = $("#slide ul li").length -1;
}else{
item--
}
movimientoSlide(item);
})
/*=============================================
MOVEMENT SLIDE
=============================================*/
function movimientoSlide(item){
// http://easings.net/es
$("#slide ul").animate({"left": item * -100 + "%"}, 1000, "easeOutQuart")
$("#paginacion li").css({"opacity":.5})
$(itemPaginacion[item]).css({"opacity":1})
interrumpirCiclo = true;
$(imgProducto[item]).animate({"top":-10 +"%", "opacity": 0},100)
$(imgProducto[item]).animate({"top":30 +"px", "opacity": 1},600)
$(titulos1[item]).animate({"top":-10 +"%", "opacity": 0},100)
$(titulos1[item]).animate({"top":30 +"px", "opacity": 1},600)
$(titulos2[item]).animate({"top":-10 +"%", "opacity": 0},100)
$(titulos2[item]).animate({"top":30 +"px", "opacity": 1},600)
$(titulos3[item]).animate({"top":-10 +"%", "opacity": 0},100)
$(titulos3[item]).animate({"top":30 +"px", "opacity": 1},600)
$(btnVerProducto[item]).animate({"top":-10 +"%", "opacity": 0},100)
$(btnVerProducto[item]).animate({"top":30 +"px", "opacity": 1},600)
}
/*=============================================
INTERVAL
=============================================*/
setInterval(function(){
if(interrumpirCiclo){
interrumpirCiclo = false;
}else{
if(!detenerIntervalo){
avanzar();
}
}
},3000)
/*=============================================
APPEAR ARROWS
=============================================*/
$("#slide").mouseover(function(){
$("#slide #retroceder").css({"opacity":1})
$("#slide #avanzar").css({"opacity":1})
detenerIntervalo = true;
})
$("#slide").mouseout(function(){
$("#slide #retroceder").css({"opacity":0})
$("#slide #avanzar").css({"opacity":0})
detenerIntervalo = false;
})
最佳答案
页面暂时处于非激活状态（不在前台）后，事件队列中的setInterval事件可能未得到处理。然后，当您回到它时，将处理所有未决事件，从而产生“竞赛”效果。
您可以通过使用setTimeout链而不是一个setInterval来防止这种情况。仅当当前循环代码已有效执行时，才会调用下一个setTimeout：
function nextCycle(){
if(interrumpirCiclo){
interrumpirCiclo = false;
}else{
if(!detenerIntervalo){
avanzar();
}
}
setTimeout(nextCycle, 3000);
}
setTimeout(nextCycle, 3000);