淺談JavaScript的計時器對象
1、JavaScript計時器,我們可以在設(shè)定的時間間隔之后來執(zhí)行代碼,而不是在函數(shù)被調(diào)用后立即執(zhí)行。
計時器類型:
1)一次性計時器:僅在指定的延遲時間之后觸發(fā)一次。
2)間隔性觸發(fā)計時器:每隔一定的時間間隔就觸發(fā)一次。
計時器方法:
1)setInterval() :在執(zhí)行時,從載入頁面后每隔指定的時間執(zhí)行代碼。
//語法 setInterval(代碼,交互時間); //參數(shù)說明:1. 代碼:要調(diào)用的函數(shù)或要執(zhí)行的代碼串。2. 交互時間:周期性執(zhí)行或調(diào)用表達(dá)式之間的時間間隔,以毫秒計(1s=1000ms)。 //返回值:一個可以傳遞給 clearInterval() 從而取消對"代碼"的周期性執(zhí)行的值。 //調(diào)用函數(shù)格式:(假設(shè)有一個clock()函數(shù)): setInterval("clock()",1000) //或 setInterval(clock,1000) //例子 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>計時器</title> <script type="text/javascript"> var int=setInterval(clock, 1000)//調(diào)用計時器 function clock(){ var time=new Date(); document.getElementById("clock").value = time; } </script> </head> <body> <form> <input type="text" id="clock" size="50" /> </form> </body> </html>
2)取消計時器clearInterval():clearInterval() 方法可取消由 setInterval() 設(shè)置的交互時間。
//語法 clearInterval(id_of_setInterval) //參數(shù)說明:id_of_setInterval:由 setInterval() 返回的 ID 值。 //例子 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>計時器</title> <script type="text/javascript"> function clock(){ var time=new Date(); document.getElementById("clock").value = time; } // 每隔100毫秒調(diào)用clock函數(shù),并將返回值賦值給i var i=setInterval("clock()",100); </script> </head> <body> <form> <input type="text" id="clock" size="50" /> <input type="button" value="Stop" onclick="clearInterval(i)" /> </form> </body> </html> //每隔 100 毫秒調(diào)用 clock() 函數(shù),并顯示時間。當(dāng)點(diǎn)擊按鈕時,停止時間
3) setTimeout()計時器,在載入后延遲指定時間后,去執(zhí)行一次表達(dá)式,僅執(zhí)行一次。
//語法 setTimeout(代碼,延遲時間); //參數(shù)說明:1. 要調(diào)用的函數(shù)或要執(zhí)行的代碼串。2. 延時時間:在執(zhí)行代碼前需等待的時間,以毫秒為單位(1s=1000ms)。 //例子1 //打開網(wǎng)頁3秒后,在彈出一個提示框 <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> setTimeout("alert('Hello!')", 3000 ); </script> </head> <body> </body> </html> //例子2 //當(dāng)按鈕start被點(diǎn)擊時,setTimeout()調(diào)用函數(shù),在5秒后彈出一個提示框 <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function tinfo(){ var t=setTimeout("alert('Hello!')",5000); } </script> </head> <body> <form> <input type="button" value="start" onClick="tinfo()"> </form> </body> </html> //例子3 //創(chuàng)建一個運(yùn)行于無窮循環(huán)中的計數(shù)器,需要編寫一個函數(shù)來調(diào)用其自身。在下面的代碼,當(dāng)按鈕被點(diǎn)擊后,輸入域便從0開始計數(shù) <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> var num=0; function numCount(){ document.getElementById('txt').value=num; num=num+1; setTimeout("numCount()",1000); } </script> </head> <body> <form> <input type="text" id="txt" /> <input type="button" value="Start" onClick="numCount()" /> </form> </body> </html>
4) 取消計時器clearTimeout(), setTimeout()和clearTimeout()一起使用,停止計時器。
//語法 clearTimeout(id_of_setTimeout) //參數(shù)說明:id_of_setTimeout:由 setTimeout() 返回的 ID 值。該值標(biāo)識要取消的延遲執(zhí)行代碼塊。 //例子:添加了一個 "Stop" 按鈕來停止這個計數(shù)器 <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> var num=0,i; function timedCount(){ document.getElementById('txt').value=num; num=num+1; i=setTimeout(timedCount,1000); } setTimeout(timedCount,1000); function stopCount(){ clearTimeout(i); } </script> </head> <body> <form> <input type="text" id="txt"> <input type="button" value="Stop" onClick="stopCount()">//停止按鈕 </form> </body> </html>
setinterval與settimeout區(qū)別:
1)因為setTimeout(表達(dá)式,延時時間)在執(zhí)行時,是在載入后延遲指定時間后,去執(zhí)行一次表達(dá)式,記住,次數(shù)是一次;而setInterval(表達(dá)式,交互時間)則不一樣,它從載入后,每隔指定的時間就執(zhí)行一次表達(dá)式 所以,完全是不一樣的
2)很多人習(xí)慣于將setTimeout包含于被執(zhí)行函數(shù)中,然后在函數(shù)外再次使用setTimeout來達(dá)到定時執(zhí)行的目的;這樣,函數(shù)外的setTimeout在執(zhí)行函數(shù)時再次觸發(fā)setTimeout從而形成周而復(fù)始的定時效果。
3)使用的時候各有各的優(yōu)勢,使用setInterval,需要手動的停止tick觸發(fā)。而使用方法中嵌套setTimeout,可以根據(jù)方法內(nèi)部本身的邏輯不再調(diào)用setTimeout就等于停止了觸發(fā)。
//setTimeout例子 showTime(); function showTime(){ var day = new Date(); alert("時間是: " + day.toString()); setTimeout("showTime()", 1000); } //setInterval例子 setInterval("showTime()", 1000); function showTime(){ var day = new Date(); alert("時間是: " + day.toString()); }
這兩種方法可能看起來非常像,而且顯示的結(jié)果也會很相似,不過兩者的最大區(qū)別就是,setTimeout方法不會每隔1秒鐘就執(zhí)行一次showTime函數(shù),它是在每次調(diào)用setTimeout后過1秒鐘再去執(zhí)行showTime函數(shù)。這意味著如果showTime函數(shù)的主體部分需要2秒鐘執(zhí)行完,那么整個函數(shù)則要每3秒鐘才執(zhí)行一次。而setInterval卻沒有被自己所調(diào)用的函數(shù)所束縛,它只是簡單地每隔一定時間就重復(fù)執(zhí)行一次那個函數(shù)。
如果要求在每隔一個固定的時間間隔后就精確地執(zhí)行某動作,那么最好使用setInterval,而如果不想由于連續(xù)調(diào)用產(chǎn)生互相干擾的問題,尤其是每次函數(shù)的調(diào)用需要繁重的計算以及很長的處理時間,那么最好使用setTimeout。
如果對計時函數(shù)不加以處理,那么setInterval將會持續(xù)執(zhí)行相同的代碼,一直到瀏覽器窗口關(guān)閉,或者用戶轉(zhuǎn)到了另外一個頁面為止。不過還是有辦法可以終止setTimeout和setInterval函數(shù)的執(zhí)行。
以上就是小編為大家?guī)淼臏\談JavaScript的計時器對象全部內(nèi)容了,希望大家多多支持腳本之家~
- javascript計時器編寫過程與實(shí)現(xiàn)方法
- javascript實(shí)現(xiàn)計時器的簡單方法
- javascript設(shè)計簡單的秒表計時器
- js仿蘋果iwatch外觀的計時器代碼分享
- javascript實(shí)現(xiàn)的簡單計時器
- javascript計時器詳解
- JavaScript計時器示例分析
- JavaScript分秒倒計時器實(shí)現(xiàn)方法
- Node.js中使用計時器定時執(zhí)行函數(shù)詳解
- javascript計時器事件使用詳解
- JS 頁面計時器示例代碼
- VB倒計時器和JS當(dāng)前時間
- JavaScript計時器用法分析【setTimeout和clearTimeout】
相關(guān)文章
JavaScript數(shù)據(jù)結(jié)構(gòu)之雙向鏈表和雙向循環(huán)鏈表的實(shí)現(xiàn)
本篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之雙向鏈表和雙向循環(huán)鏈表的實(shí)現(xiàn),具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-11-11bootstrap fileinput 插件使用項目總結(jié)(經(jīng)驗)
這篇文章主要介紹了bootstrap fileinput 插件使用項目總結(jié),是小編日常碰到的問題及解決方法,需要的朋友可以參考下2017-02-02JavaScript實(shí)現(xiàn)的石頭剪刀布游戲源碼分享
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的石頭剪刀布游戲源碼分享,挺好玩的小游戲,關(guān)鍵在一些算法上,需要的朋友可以參考下2014-08-08移動端Ionic App 資訊上下循環(huán)滾動的實(shí)現(xiàn)代碼(跑馬燈效果)
這篇文章主要介紹了移動端Ionic App 資訊上下循環(huán)滾動的實(shí)現(xiàn)代碼,實(shí)現(xiàn)方法需要借助jQuery庫的選擇器和動畫函數(shù),并且把jquery的操作封裝到指令里,具體指令代碼大家通過本文學(xué)習(xí)吧2017-08-08被jQuery折騰得半死,揭秘為何jQuery為何在IE/Firefox下均無法使用
某學(xué)員前日實(shí)施一個Web項目實(shí)施發(fā)生了悲劇,找到我求解決,把我也折騰個半死。2010-01-01JavaScript實(shí)現(xiàn)輪播圖方法(邏輯清晰一看就懂)
這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)輪播圖方法的相關(guān)資料,JS輪播圖的實(shí)現(xiàn)核心是使用JavaScript來控制圖片的切換和顯示,配合HTML和CSS完成布局和樣式設(shè)置,文中介紹的方法邏輯清晰一看就懂,需要的朋友可以參考下2023-12-12利用Node.js創(chuàng)建一個密碼生成器的全步驟
這篇文章主要給大家介紹了關(guān)于如何利用Node.js創(chuàng)建一個密碼生成器的相關(guān)資料,文章將實(shí)現(xiàn)的步驟一步步介紹的非常詳細(xì),對大家具有也一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2021-07-07