2018-05-24-js-timer-function

title	layout	categories	excerpt	tags
JavaScript計時器函數用法	post	JavaScript	Javascript計時函數的詳細介紹	Javascript計時器 setTimeout setInterval

Javascript中和大多數語言一樣，存在計時函數，使某語句或函數不用立即執行，可以延時設定的時間值之後再執行。

setTimeout() 方法

這個函數表示括號中的代碼，延時指定時間後再執行，格式爲 setTimeout("function()", time)，其中 time 的單位是毫秒。

例如：

function fx()
{
	alert();
}
setTimeout("fx()", 2000);

也可以寫成：

setTimoeout(function(){
	alert();
}, 2000);

結果就是頁面加載完 2 秒後彈出提示框。

clearTimeout() 方法

clearTimeout() 方法用於結束 setTimeout() 方法的執行，括號中參數爲 setTimeout() 返回的 ID 值。

舉例說明：

var int1 = setTimeout(function(){alert();}, 5000);
clearTimeout(int1);

這樣就能終止代碼執行，不會彈出提示框。

setInterval() 方法

這個函數表示每隔指定時間間隔執行一次括號中的代碼，格式爲：setInterval("function()", time)， time 單位依然爲毫秒。

例如：

function fx()
{
	document.write("0");
}
setInterval("fx()", 2000);

這裏就不要用 alert() 做實驗了，後果你懂的 -_- .

同樣也能寫成：

setInterval(function(){
	document.write("0");
}, 1000);

效果就是不斷輸出字符“0”。

clearInterval() 方法

用法與 clearTimeout() 一樣，終止 setInterval() 的執行，括號中填 setInterval() 的返回值。

例如：

var int2 = setInterval(function()[
	document.write("0");
}, 1000);
clearInterval(int2);

這樣就能終止輸出。

注意

有個小問題，用 setTimeout() 舉例，假如代碼像下面這樣寫：

function fx()
{
	alert();
}
setTimeout(fx(), 3000);

相比上面，就是函數第一個參數少了雙引號，猜一下後果會怎樣……

後果當然是頁面加載後立刻彈出提示框，並不會延時 3 秒。下面的寫法也是類似的效果：

setTimeout((function(){
	alert();
})(), 3000);

原因都一樣，無論是語句塊 fx() 還是匿名函數 (function(){})()，都是會立刻執行的語句，而加雙引號的 "fx()" 和 function(){} 就是當成一個參數傳遞給了函數 setTimeout()，然後這個參數語句直到 setTimeou() 真正執行時才生效，也就是延時3秒後執行。

函數 setInterval() 的這個性質與 setTimeout() 類似。