JavaScript 定時(shí)器(Timing)

計(jì)時(shí)函數(shù)是使我們能夠在特定時(shí)間執(zhí)行功能的函數(shù)。

使用計(jì)時(shí)函數(shù)，您可以延遲代碼的執(zhí)行，以免在觸發(fā)事件的確切時(shí)刻完成代碼。

JavaScript中有兩個(gè)計(jì)時(shí)函數(shù)：

• setTimeout(function, milliseconds) -等待指定的毫秒數(shù)后執(zhí)行函數(shù)(function)

• setInterval(function, milliseconds) -與setTimeout()相同，但是連續(xù)重復(fù)執(zhí)行該函數(shù)(function)

這兩個(gè)setTimeout()和setInterval()是方法窗口對(duì)象，可以在不窗口前綴被寫入。

setTimeout()方法

setTimeout()方法用于在一段時(shí)間后僅執(zhí)行一次函數(shù)或指定的代碼段。

語(yǔ)法：

window.setTimeout(function, milliseconds)

第一個(gè)參數(shù)是要執(zhí)行的函數(shù)。

第二個(gè)參數(shù)指示執(zhí)行前的毫秒數(shù)（1秒= 1000毫秒）。

以下示例在單擊按鈕2秒鐘后將顯示警報(bào)消息：

<button onclick="setTimeout(myFunc, 2000)">Click</button>

<script>
function myFunc() {
  alert("Hello World");
}
</script>

停止執(zhí)行代碼

clearTimeout()方法停止執(zhí)行setTimeout()中指定的函數(shù)。

語(yǔ)法：

window.clearTimeout(var)

clearTimeout()方法使用從setTimeout()返回的變量。

  t = setTimeout();

  clearTimeout(t);

如果尚未執(zhí)行該函數(shù)，則可以通過(guò)調(diào)用clearTimeout()方法來(lái)停止執(zhí)行。

與上述示例相同，但添加了“停止”按鈕：

<button onclick="myFunc()">Click</button>
<button onclick="myStopFunc()">Stop the alert</button>

<script>
var t;
function myFunc() {
  t = setTimeout(function(){ alert("Hello world"); }, 2000);
}

function myStopFunc() {
  clearTimeout(t);
}
</script>

setInterval()方法

setInterval()方法重復(fù)調(diào)用一個(gè)函數(shù)，每次調(diào)用之間有固定的時(shí)間延遲。

語(yǔ)法：

window.setInterval(function, milliseconds)

第一個(gè)參數(shù)是要執(zhí)行的函數(shù)。

第二個(gè)參數(shù)指示每次執(zhí)行之間的時(shí)間間隔的長(zhǎng)度。

本示例每秒執(zhí)行一次稱為“ startTimer”的功能（如數(shù)字手表）：

//每1秒執(zhí)行一次startTimer()
setInterval(startTimer, 1000);

function startTimer() {
  var date = new Date();
  document.getElementById("result").innerHTML = date.toLocaleTimeString();
}

停止執(zhí)行代碼

clearInterval()方法停止執(zhí)行setInterval()中指定的函數(shù)。

語(yǔ)法：

window.clearInterval(var)

clearInterval()方法使用從setInterval()返回的變量。

  t = setInterval();

  clearInterval(t);

與上述示例相同，但添加了“停止”按鈕：

//每1秒執(zhí)行一次startTimer()
var t = setInterval(startTimer, 1000);

function startTimer() {
  var date = new Date();
  document.getElementById("result").innerHTML = date.toLocaleTimeString();
}

//取消使用setInterval()創(chuàng)建的重復(fù)動(dòng)作
function stopTimer() {
   clearInterval(t);
}

更多示例

單擊下面的“開(kāi)始計(jì)數(shù)”按鈕以啟動(dòng)計(jì)時(shí)器。單擊“停止計(jì)數(shù)”按鈕停止計(jì)數(shù)：

單擊下面的“啟動(dòng)進(jìn)度”按鈕以啟動(dòng)進(jìn)度欄。單擊“停止進(jìn)度”按鈕以停止進(jìn)度欄：