首頁技術(shù)文章正文

JavaScript定時(shí)器設(shè)置三秒自動(dòng)關(guān)閉廣告

更新時(shí)間:2021-11-16 來源:黑馬程序員 瀏覽量:

IT培訓(xùn)班

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

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

表8-1定時(shí)器方法

1637047172048_方法說明.png

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

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

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

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

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

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

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

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

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

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


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

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

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

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





猜你喜歡：

JavaScript面向?qū)ο笮薷臉?biāo)簽頁詳解

JavaScript中怎樣創(chuàng)建Date對象？

JavaScript中l(wèi)ocation對象怎么用？

黑馬程序員web前端開發(fā)開發(fā)工程師培訓(xùn)

分享到：
在線咨詢 我要報(bào)名
和我們在線交談！