「JavaScript 定時器」setInterval、setTimeout和requestAnim

ghnor 發(fā)布于2019-08-26 11:51 / 2266人閱讀

摘要：大多數(shù)瀏覽器并沒有精確到毫秒級別的觸發(fā)事件，例如，我們設(shè)定某個函數(shù)在毫秒后執(zhí)行，在老版本的中，這個函數(shù)至少會在毫秒以后執(zhí)行。三實戰(zhàn)光說不練假把式，現(xiàn)在我們就用上面介紹的三種定時器完成進度條的效果。

一.常見定時器

我們常見的定時器有以下兩種

1. window.setTimeout 用于在指定的毫秒數(shù)后執(zhí)行某段既定的代碼
2. window.setInterval 用于每隔一段毫秒數(shù)重復(fù)執(zhí)行既定的代碼

這兩個方法都可以通過手工設(shè)置時間來設(shè)定是多少毫秒后執(zhí)行這段代碼，或者是每隔多少毫秒執(zhí)行這段代碼。

雖然我們期待瀏覽器按照我們設(shè)定的時間精確的執(zhí)行代碼，但是js卻不能保證代碼能恰好在那個時間點被運行，原因有兩個。

大多數(shù)瀏覽器并沒有精確到毫秒級別的觸發(fā)事件，例如，我們設(shè)定某個函數(shù)在3毫秒后執(zhí)行，在老版本的IE中，這個函數(shù)至少會在15毫秒以后執(zhí)行。而在現(xiàn)代瀏覽器中，這個數(shù)值會短一點，但時間差一般也會超過1毫秒。

第二個原因與js的運行機制有關(guān)，具體見JavaScript 運行機制詳解：再談Event Loop.簡單來說，就是js是一個單線程的解釋器，一段時間只能執(zhí)行一段代碼，所以運行時分為主線程和任務(wù)隊列兩部分。而我們在定時器中設(shè)置的時間，僅代表1000毫秒后把這個任務(wù)插入到任務(wù)隊列中，而此時必須要等到主線程的代碼執(zhí)行完畢，才能執(zhí)行任務(wù)隊列中的定時器的任務(wù)（在任務(wù)隊列中也有調(diào)度，不一定第一個執(zhí)行當前任務(wù)），因此時間是無法保證的。

二、requestAnimationFrame

那有沒有時間準確的定時器呢？有一種選擇是requestAnimationFrame. 示例如下：

 function animateMe(){
    requestAnimationFrame(function(){
      console.log(new Date());
      animateMe();
    })
}
animateMe();

這個api的原理是在由系統(tǒng)來決定回調(diào)函數(shù)的執(zhí)行時機，在每一次系統(tǒng)繪制之前，會主動調(diào)用requestAnimationFrame中的回調(diào)函數(shù)，而頻率也緊緊跟隨瀏覽器的刷新頻率。比如一般電腦的刷新頻率通常為60Hz，即一秒鐘重繪60次，那么回調(diào)函數(shù)就等于1000/60=16.7毫秒被執(zhí)行一次，而如果刷新頻率變?yōu)?5Hz，那么這個時間就變?yōu)?000/75=13.3毫秒被執(zhí)行一次。這樣能保證回調(diào)函數(shù)在每一次繪制的間隔時間內(nèi)只被執(zhí)行一次，因此它的時間是可靠的。

三、實戰(zhàn)

光說不練假把式，現(xiàn)在我們就用上面介紹的三種定時器完成進度條的效果。

1.setInterval

var timer;
$(".runBtn").click(function(){
    clearInterval(timer);
    $("#bar").width(0);
    timer = setInterval(function(){
      if($("#bar").width() < 500){
         $("#bar").width($("#bar").width()+5);
         $("#bar").text($("#bar").width()/5+"%");
      }else{
        clearInterval(timer);
      } 
    },16);
 });

點此預(yù)覽效果

2.setTimeout

var timer;
$(".runBtn").click(function(){
    clearTimeout(timer);
    $("#bar").width(0);
    timer = setTimeout(function fn(){
      if($("#bar").width() < 500){
         $("#bar").width($("#bar").width()+5);
         $("#bar").text($("#bar").width()/5+"%");
         timer = setTimeout(fn,16);
      }else{
        clearTimeout(timer);
      } 
    },16);
 });

點此預(yù)覽效果

3.requestAnimationFrame

var timer;
$(".runBtn").click(function(){
    cancelAnimationFrame(timer);
    $("#bar").width(0);
    timer = requestAnimationFrame(function fn(){
      if($("#bar").width() < 500){
         $("#bar").width($("#bar").width()+5);
         $("#bar").text($("#bar").width()/5+"%");
         requestAnimationFrame(fn);
      }else{
        cancelAnimationFrame(timer);
      } 
    });
 });

點此預(yù)覽效果

四、最后

文章都來自本人的總結(jié)，難免有些紕漏，歡迎大家指正。一起學(xué)習(xí)，一起進步。如果覺得不錯，歡迎點贊收藏嚶嚶嚶~~~