JavaScript兩種計時器介紹

在網頁開發中，經常需要利用計時器實現一些動態操作，比如頁面元素的動畫效果、頁面倒計時等等。JavaScript提供了兩種計時器實現方式——setInterval和setTimeout。

setInterval是一種周期性計時器，在指定的時間間隔內重復執行同一個方法，比如下面這個例子是每隔1秒鐘彈出一個窗口：

setInterval(function(){
alert("這是一個周期性計時器");
}, 1000);

setTimeout則是一種一次性計時器，只會執行一次指定的方法，比如下面這個例子是3秒鐘之后彈出一個窗口：

setTimeout(function(){
alert("這是一個一次性計時器");
}, 3000);

兩種計時器的差異就在于執行次數和時間間隔的不同。接下來分別對這兩種計時器進行詳細介紹。

setInterval計時器

setInterval需要傳入兩個參數——一個是要執行的函數，另一個是時間間隔，單位是毫秒。下面是一個在頁面中周期性更改文本內容的例子：

window.onload = function(){
var content = document.getElementById("content");
var i = 0;
setInterval(function(){
i++;
content.innerHTML = "計時器已執行"+i+"次";
}, 1000);
};

上面的代碼中，我們首先找到content元素，然后定義一個計數器i，每執行一次計時器就讓i自增一，再把i的值更新到content元素中。

值得注意的是，setInterval返回的是一個計時器ID，可以用來停止計時器的執行：

var timerID = setInterval(function(){
alert("計時器執行中");
}, 1000);
//停止計時器
clearInterval(timerID);

setTimeout計時器

setTimeout比較適合做一些延時操作，比如下面這個例子是在3秒鐘后隱藏一個元素：

window.onload = function(){
var element = document.getElementById("element");
setTimeout(function(){
element.style.display = "none";
}, 3000);
};

上面的代碼中，我們首先找到需要 hide 的元素，然后用 setTimeout 實現延時操作。在 3 秒鐘之后，將元素隱藏起來。

和setInterval一樣，setTimeout也返回一個計時器ID，可以用來取消計時器的執行：

var timerID = setTimeout(function(){
alert("計時器執行中");
}, 1000);
//取消計時器
clearTimeout(timerID);

小結

在 JavaScript 中，我們可以使用 setInterval 和 setTimeout 兩個函數來實現計時器效果。setInterval 是周期性計時器，可以重復執行一個方法，而 setTimeout 則是一次性計時器，只會執行一次指定的方法。兩種計時器在應用中各有優缺點，需要根據實際情況進行選擇。同時，我們需要根據應用需要合理使用計時器，避免出現性能問題。