利用定時器定時實現特定需求

定時器於許多實作中都會遇到，當我們需要在一定時間後執行特定事件時，就可以使用定時器。在 JS 中有兩個經常使用的定時器，分別爲 setTimeout() 及 setInterval()，兩者最大差異爲執行次數。setTimeout() 爲一定時間後執行一次就結束；setInterval() 爲間隔一定時間，就會重複執行。

setTimeout

既然有可以設定定時器，就可以取消定時器。在設定定時器時可以用變數將它裝起來，用以後續取消時，指定清除。

如下簡單範例，將定時器存放於 clock 變數中，第一個參數表示要執行的任務，可以直接寫入程式碼也可以呼叫方法，在此呼叫 printword 這個方法。第二個參數 200 表示延遲執行時間，單位爲毫秒。則 200 毫秒後監控台會印出 hello。

var clock = setTimeout(printword , 200);
function printword(){
  console.log("hello");
}

若第二個參數不輸入，默認值爲 0。可以執行，執行時間是等待 JS 同步任務執行完成後，並非即時執行。

若要清除 clock 這個定時器，可以使用 clearTimeout() ，參數的部分以存放定時器的變數來指定。

clearTimeout(clock)

setInterval

setInterval 的使用方式大致上與 setTimeout 相同。唯 setInterval 執行次數爲無限重複。若上述範例改用 setInterval 執行，則每隔 200 毫秒，監控台就會印出 hello。

var clock = setInterval(printword , 200);
function printword(){
  console.log("hello");
}

若要清除定時器，可以使用 clearInterval() ，參數的部分一樣以存放定時器的變數來指定。

clearInterval(clock);

setInterval 經常被實作於動畫，例如透明度，可以依照定時器時間，每隔一段時間調整透明度，就可以實現越來越透明的效果。如下範例：

var box = document.getElementById('box');
var opacity = 1;
var clock = setInterval(function() {
 opacity = opacity-0.1;
 if (opacity >= 0) {
 box.style.opacity = opacity;
 } else {
 clearInterval(clock);
 }
}, 500);

setInterval 也可以搭配滾輪事件，移動畫面至指定區塊，形成區塊轉場效果。

定時器運作機制

JS 是單線程，爲了避免運作塞車，提供了一些異步處理方式，例如定時器、Ajax 請求、promise 事件等。異步處理，指的是讓那些可能會佔用較久線程的事件，會等待他們回覆時或是可以執行時，排入事件佇列(Event Queue)。當 JS 手上沒有需處理的事情時，再以先進先出的方式執行事件佇列中的事件。

當我們設定定時器時，一旦執行時間到，就會被排入事件佇列(Event Queue)等待處理，因此在執行時間上，可能受前面事件處理時間影響。例如定時器設定 5秒後執行，而前面有一個執行六秒的事件，那麼定時器就在五秒時排入事件佇列，但是等前面事件完成後才執行，可能造成延遲。

而 setInterval 還有另外一個特性，如果事件佇列(Event Queue)中已經有該事件排列，則不會再產生新的事件來排隊。例如有一定時器 setInterval ，設定三秒執行一次，而前面有一個執行十秒的事件，則到了第三秒時，定時器排入事件佇列，到了第六秒時又應該執行該定時器事件，但因第三秒時的事件仍在事件佇列中排隊，就不會再產生新的重複排隊事件。因此特性的關係，在設定 setInterval 時，其執行時間不該長於間隔時間，否則事件間隔不會是我們設定的間隔時間。

以上是今天關於定時器的理解與整理^^。