SetInterval在执行多轮执行后会产生延迟

Question

我在执行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

Answer 1

可能有Animation queue问题。

我也遇到类似的问题，与Chrome或webkit浏览器。将setInterval/setTimeout与jQuery的.animate()函数一起使用时。

在两个新选项卡中打开Original和updated小提琴，并将其放在几分钟后再次检查。你会得到它更新的代码将顺利动画这是用来与stop

Working code

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

使用stop之前fadeIn或fadeOut

Usefull link

jQuery的文档（source）：

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

如果你需要同时使用淡入淡出或（而不是更通用的动画功能），你需要明确设置两个.stop（） 参数清除队列为真。