iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 28
0

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

定時器於許多實作中都會遇到,當我們需要在一定時間後執行特定事件時,就可以使用定時器。在 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 時,其執行時間不該長於間隔時間,否則事件間隔不會是我們設定的間隔時間。

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


上一篇
Day27 JS 之 你是誰
下一篇
Day29 說說 Array 那些方法們
系列文
前端之 " wow~原來是這樣啊 "30

尚未有邦友留言

立即登入留言