更新時間:2021-11-16 來源:黑馬程序員 瀏覽量:
在瀏覽網(wǎng)頁的過程中,我們經(jīng)??梢钥吹捷啿D效果,即每隔一段時間,圖片就會自動切換一次;或者在商品頁面看到商品倒計時功能,這些動畫就用到了定時器。定時器就是在指定時間后執(zhí)行特定操作,或者讓程序代碼每隔一段時間執(zhí)行一次,實現(xiàn)間歇操作。
在JavaScript中,提供了兩組方法用于定時器的實現(xiàn),具體方法如表8-1所示。
表8-1定時器方法
表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中怎樣創(chuàng)建Date對象?