站長資訊網(wǎng)
javascript定時器有2個函數(shù)，分別為：1、setTimeout()函數(shù)，用于在指定的時間后（單位為毫秒），執(zhí)行某些代碼，代碼只會執(zhí)行一次；2、setInterval()函數(shù)，用于按照指定的周期（單位為毫秒）來重復(fù)執(zhí)行某些代碼。
本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。
JavaScript 定時器，有時也稱為“計時器”，用來在經(jīng)過指定的時間后執(zhí)行某些任務(wù)，類似于我們生活中的鬧鐘。
在 JavaScript 中，我們可以利用定時器來延遲執(zhí)行某些代碼，或者以固定的時間間隔重復(fù)執(zhí)行某些代碼。例如，您可以使用定時器定時更新頁面中的廣告或者顯示一個實時的時鐘等。
JavaScript 中提供了兩種方式來設(shè)置定時器，分別是 setTimeout() 和 setInterval()，它們之間的區(qū)別如下：
| 方法 | 說明 |
|---|---|
| setTimeout() | 在指定的時間后（單位為毫秒），執(zhí)行某些代碼，代碼只會執(zhí)行一次 |
| setInterval() | 按照指定的周期（單位為毫秒）來重復(fù)執(zhí)行某些代碼，定時器不會自動停止，除非調(diào)用 clearInterval() 函數(shù)來手動停止或著關(guān)閉瀏覽器窗口 |
setTimeout()
JS setTimeout() 函數(shù)用來在指定時間后執(zhí)行某些代碼，代碼僅執(zhí)行一次。
JS setTimeout() 函數(shù)的語法格式如下：
setTimeout(code,millisec)
參數(shù)說明如下：
-
code 必需。要調(diào)用的函數(shù)后要執(zhí)行的 JavaScript 代碼串。
-
millisec 必需。在執(zhí)行代碼前需等待的毫秒數(shù)。
示例代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JavaScript</title> </head> <body> <script type="text/javascript"> var myFun = function (str = 'JavaScript'){ document.write(str + "<br>"); }; setTimeout(myFun, 500, 'Hello'); setTimeout(myFun, 1000); setTimeout(function(){ document.write("定時器<br>"); }, 1500) setTimeout("document.write("setTimeout()")", 2000); </script> </body> </html>
運(yùn)行上面的代碼，會間隔 500 毫秒，依次輸出下面的內(nèi)容：
Hello JavaScript 定時器 setTimeout()
setInterval()
JS setInterval() 函數(shù)可以定義一個能夠重復(fù)執(zhí)行的定時器，每次執(zhí)行需要等待指定的時間間隔。
JS setInterval() 函數(shù)的語法格式如下：
setInterval(code,millisec[,"lang"])
參數(shù)說明如下：
-
code 必需。要調(diào)用的函數(shù)或要執(zhí)行的代碼串。
-
millisec 必須。周期性執(zhí)行或調(diào)用 code 之間的時間間隔，以毫秒計。
提示：通過 setInterval() 函數(shù)定義的定時器不會自動停止，除非調(diào)用 clearInterval() 函數(shù)來手動停止或著關(guān)閉瀏覽器窗口。
示例代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JavaScript</title> </head> <body> <p id="one"></p> <p id="two"></p> <script type="text/javascript"> var num = 1; var myFun = function (){ document.getElementById('one').innerHTML += num + " "; num ++; }; setInterval(myFun, 500); setInterval(function(){ var d = new Date(); document.getElementById('two').innerHTML = d.toLocaleTimeString(); }, 1000); </script> </body> </html>
運(yùn)行結(jié)果如下：
JS 取消定時器
當(dāng)使用 setTimeout() 或 setInterval() 設(shè)置定時器時，這兩個方法都會產(chǎn)生一個定時器的唯一 ID，ID 為一個正整數(shù)值，也被稱為“定時器標(biāo)識符”，通過這個 ID，我們可以清除 ID 所對應(yīng)的定時器。
我們可以借助 clearTimeout() 或 clearInterval() 函數(shù)來分別清除由 setTimeout() 或 setInterval() 函數(shù)創(chuàng)建的定時器。調(diào)用 clearTimeout() 或 clearInterval() 函數(shù)需要提供定時器的唯一 ID 作為參數(shù)，示例代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JavaScript</title> </head> <body> <p>當(dāng)前時間為：<span id="clock"></span></p> <button onclick="stopClock(this);">停止</button><hr> <button onclick="delayedAlert(this);">2秒后彈出一個提示框</button> <button onclick="clearAlert();">取消</button> <script type="text/javascript"> var intervalID; function showTime() { var d = new Date(); document.getElementById("clock").innerHTML = d.toLocaleTimeString(); } function stopClock(e) { clearInterval(intervalID); e.setAttribute('disabled', true) } intervalID = setInterval(showTime, 1000); var timeoutID; var that; function delayedAlert(e) { that = e; timeoutID = setTimeout(showAlert, 2000); e.setAttribute('disabled', true) } function showAlert() { alert('這是一個提示框。'); that.removeAttribute('disabled'); } function clearAlert() { clearTimeout(timeoutID); that.removeAttribute('disabled'); } </script> </body> </html>
運(yùn)行結(jié)果如下圖所示：
【推薦學(xué)習(xí)：javascript高級教程】
