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（） 參數清除隊列爲真。