教育行業(yè)A股IPO第一股（股票代碼 003032）

全國咨詢/投訴熱線：400-618-4000

JavaScript怎樣實現(xiàn)定時器功能？

更新時間:2021年11月17日10時20分 來源:傳智教育 瀏覽次數(shù):

好口碑IT培訓(xùn)

在瀏覽網(wǎng)頁的過程中，我們經(jīng)常可以看到輪播圖效果，即每隔一段時間，圖片就會自動切換一次；或者在商品頁面看到商品倒計時功能，這些動畫就用到了定時器。定時器就是在指定時間后執(zhí)行特定操作，或者讓程序代碼每隔一段時間執(zhí)行一次，實現(xiàn)間歇操作。

在JavaScript中，提供了兩組方法用于定時器的實現(xiàn)，具體方法如表8-1所示。

表8-1定時器方法

1637047172048_方法說明.png

表8-1中，setTimeout0和setlnterval0方法都可以在一個固定時間段內(nèi)執(zhí)行代碼，不同的是前者只執(zhí)行一次代碼，而后者會在指定的時間后自動重復(fù)執(zhí)行代碼。

在實際開發(fā)中，我們可以通過setTimeout0方法實現(xiàn)函數(shù)的一次調(diào)用，并且可以通過clearTimeout0來清除setTimeout（）定時器。

setTimeout()和setInterval()的語法格式如下。

setTimeout（調(diào)用的函數(shù)，[延遲的毫秒數(shù)]）
setInterval（調(diào)用的函數(shù)，[延遲的毫秒數(shù)]）

在上述語法中，第1個參數(shù)表示到達(dá)第2個參數(shù)設(shè)置的等待時間后要執(zhí)行的代碼，也可以傳入一個函數(shù)，或者函數(shù)名，第2個參數(shù)的時間單位以毫秒（ms）計。

下面我們以setTimeout()為例進(jìn)行代碼演示，具體代碼如下。

//參數(shù)形式1：用字符串表示一段代碼
setTimeout('alert ("JavaScript");', 3000);
//參數(shù)形式2：傳人一個匿名函數(shù)
setTimeout (function () {
alert ('JavaScript');
},3000);
//參數(shù)形式3：傳入函數(shù)名
setTimeout(fn, 3000);
function fn(){
console.log('JavaScript');
}

在上述代碼中，當(dāng)參數(shù)為一個函數(shù)名時，這個函數(shù)名不需要加()小括號，否則就變成了立即執(zhí)行這個函數(shù)，將函數(shù)執(zhí)行后的返回值傳入。如果延遲的毫秒數(shù)省略時，默認(rèn)為0。

在實際開發(fā)中，考慮到一個網(wǎng)頁中可能會有很多個定時器，所以建議用一個變量保存定時器的id（唯一標(biāo)識）,若想要在定時器啟動后，取消該定時器操作，可以將setTimeost()的返回值（定時器id）傳遞給clearTimeout)方法。示例代碼如下。

//在設(shè)置定時器時，保存定時器的唯一標(biāo)識
var timer = setTimeout (fn, 3000):
//如果要取消定時器，可將唯一標(biāo)識的傳遞給clearTimeout ()方法
clearTimeout(timer);


【案例】3秒后自動關(guān)閉廣告

本案例將會使用sefTimeoat(）實現(xiàn)3秒后自動關(guān)閉廣告的效果，具體代碼如下。

<body>
<saript>
conaole.log('廣告是示'）
var timer = setTimeout(fn, 3000):
function fn(){
console.log('廣告關(guān)閉了');
}
</script>
</body>

上述代碼中，第4行代碼定義了一個timer 變量用于保存setTimeout定時器的功能為3000ms后執(zhí)行fn函數(shù)。第5-7行代碼定義處理函數(shù)fn,并“打印廣告關(guān)閉了”。



猜你喜歡：

Javascript猜數(shù)游戲怎么實現(xiàn)？【含游戲源碼】

JavaScript數(shù)據(jù)類型轉(zhuǎn)為字符串的方式有哪些？

JavaScript面向?qū)ο髣h除標(biāo)簽頁具體演示

JavaScript中創(chuàng)建Date對象有幾種方法？

傳智教育HTML&JS前端開發(fā)培訓(xùn)

0 分享到：
和我們在線交談！