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