首頁技術文章正文

JavaScript定時器設置三秒自動關閉廣告

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

IT培訓班

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

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

表8-1定時器方法

1637047172048_方法說明.png

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

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

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

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

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

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

//參數(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');
}

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

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

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


【案例】3秒后自動關閉廣告

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

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

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





猜你喜歡:

JavaScript面向對象修改標簽頁詳解

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

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

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

分享到:
在線咨詢 我要報名
和我們在線交談!