JS定時器：setInterval()和setTimeout()

JavaScript 對象指既可以保存一組不同類型的數據（屬性），又可以包含有關處理這些數據的函數（方法）的特殊數據類型。JS 對象可以使用兩種方式獲得，一是開發人員自定義；二是由 ECMAScript 提供。由 ECMAScript 提供的對象稱爲 JavaScript 內置對象。

JS 常用的 JavaScript 內置對象有：window 對象、Array 對象、String 對象、Date 對象、Math對象和 RegExp 等對象。本節教程主要介紹 window 對象中的定時器的創建和清除的相關方法，其他內容之後介紹。

 

window 對象提供了定時器功能。定時器的功能是：在規定的時間自動執行某個函數。根據執行的機制，定時器分爲間歇定時器和延遲（超時）定時器，前者是每間歇一段時間就會執行指定的函數；後者是在指定的時間到期後就會執行指定的函數。間歇定時器會以指定的間歇時間作爲週期循環不斷地執行函數；而延遲定時器則只在時間到期時執行一次函數。

 

1. setInterval 間歇定時器的創建與清除

間歇定時器的創建使用 window 對象的 setInterval() 方法。在 JS 中，對象方法的調用格式通常爲：對象名.方法，但由於 window 對象是全局對象，訪問同一個窗口中的方法時，可以省略對象名“window”，所以對 window 對象方法，通常都是直接使用方法。

使用 setInterval() 創建間歇定時器的格式如下：

定時器對象ID = setInterval(函數調用｜函數定義, 毫秒, [arg1], [arg2], ...);

 

setInterval() 主要包含兩個參數，第一個參數就是定時器需要定時執行的函數，該參數可以是一個用函數名錶示的函數調用語句，也可以是一個函數定義語句，示例如下：

function fn(){
     alert("創建間歇定時器");
}
setInterval(fn,1000);//定時器第一個參數爲函數調用語句
//以上代碼等效下面的代碼：
setInterval(function(){
    alert("創建間歇定時器")
},1000);//定時器的第一個參數爲函數定義語句，注：其中定義的函數可以是匿名或有名，但通常都定義爲匿名

帶參數的情況：

function sayHi(phrase, who) {
  alert( phrase + ', ' + who );
}

setInterval(sayHi, 1000, "Hello", "John"); // Hello, John

 

setInterval() 第二參數是一個單位爲毫秒的數值（表示執行第一個參數指定操作所需的等待時間）。該方法表示每隔由第二個參數設定的毫秒數，就執行第一個參數指定的操作。setInterval() 執行後將返回一個唯一的數值 ID。

通過定時器返回的 ID，可以清除定時器。清除間歇定時器的格式如下：

clearInterval(定時器對象ID);

下面使用倒計時的示例演示間歇定時器的創建和清除。

<script>
   window.onload = function(){
     var oSpan = document.getElementById('day');
     var num = 10;
     var timer = setInterval(function(){//創建定時器
      oSpan.innerHTML = --num;
      if(num == 0){
           clearInterval(timer);//清除定時器
      }
     },86400000);    
};
</script>

2. setTimeout 延遲定時器的創建和清除

延遲定時器的創建使用 window 對象的 setTimeout() 方法，創建格式如下：

定時器對象ID = setTimeout(函數調用｜函數定義,毫秒, [arg1], [arg2], ...);

setTimeout 和 setInterval 的不同之處在於：setInterval 可以循環不斷地執行指定操作，而 setTimeout 只能執行一次參數指定的操作。不過，通過對 setTimeout() 的遞歸調用，可以讓 setTimout() 達到與 setInterval() 同樣的循環不斷執行操作的目的。

和間歇定時器一樣，延遲定時器也可以通過其返回的 ID 來清除。清除延遲定時器的格式如下：

3. 區別

上面是不是看起來沒有什麼區別，但是setTimeout方法不會每隔5秒鐘就執行一次函數，它是在每次調用setTimeout後過5秒鐘再去執行函數。這意味着如果函數的主體部分需要1秒鐘執行完，那麼整個函數則要每6秒鐘才執行一次。而setInterval卻沒有被自己所調用的函數所束縛，它只是簡單地每隔一定時間就重複執行一次那個函數。

 

ps: 注意上面的第一個參數如果傳入的是一個函數名稱，不能包含“()”，單純傳一個名稱進去即可，因爲定時器期望的是一個對函數的引用，而如果傳入的函數包含"()"，會直接被執行，然後傳入的是執行後函數的返回值