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