實(shí)例講解JS中setTimeout()的用法
本文實(shí)例講解了JS中setTimeout()的用法,分享給大家供大家參考,具體內(nèi)容如下
效果圖:
具體代碼:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標(biāo)題文檔</title> <script type="text/javascript"> var timer; //全局變量 var i=0; //變量初始化,全局變量 //定義函數(shù):開始計(jì)時(shí) function start() { //獲取id=result的對(duì)象 var obj = document.getElementById("result"); var str = "該程序已經(jīng)運(yùn)行了"+i+"秒!"; i++; //展開 i=i+1 //將變量str的內(nèi)容寫入到id=result中去 obj.value = str; //給表單元素加內(nèi)容,一般用value屬性 //除表單外的其它標(biāo)記用JS寫內(nèi)容,使用innerHTML //設(shè)置延時(shí)器 timer = window.setTimeout("start()",10); } //定義函數(shù):停止計(jì)時(shí) function stop() { window.clearTimeout(timer); } </script> </head> <body> <input type="button" id="result" value="該程序已經(jīng)運(yùn)行了0秒!" /><br /> <input type="button" onclick="start()" value="開始" /> <input type="button" onclick="stop()" value="停止" /> </body> </html>
下面來說一說具體的用法:
1、參數(shù)
code (必需):(本意是代碼的意思)要調(diào)用的函數(shù)后要執(zhí)行的 JavaScript 代碼串。
millisec(必需):在執(zhí)行代碼前需等待的毫秒數(shù)。
提示:
setTimeout() 只執(zhí)行 code 一次。如果要多次調(diào)用,請(qǐng)使用 setInterval() 或者讓 code 自身再次調(diào)用 setTimeout()。
2、實(shí)例
<html> <head> <scripttype="text/javascript"> functiontimedMsg() { vart= setTimeout(" alert('5seconds!')",5000) } </script> </head> <body> <form> <inputtype="button" value="Displaytimedalertbox!"onClick="timedMsg()"> </form> <p>Clickonthebuttonabove.Analertboxwillbedisplayedafter5seconds.</p> </body> </html>
3、實(shí)例(2)
functionclockon(bgclock){ varnow=newDate(); varyear=now.getFullYear(); varmonth=now.getMonth(); vardate=now.getDate(); varday=now.getDay(); varhour=now.getHours(); varminu=now.getMinutes(); varsec=now.getSeconds(); varweek; month=month+1; if(month<10)month="0"+month; if(date<10)date="0"+date; if(hour<10)hour="0"+hour; if(minu<10)minu="0"+minu; if(sec<10)sec="0"+sec; /*vararr_week=newArray("星期日","星期一","星期二","星期三","星期四","星期五","星期六"); week=arr_week[day]; */ switch(day){ case1:week="星期一";break; case2:week="星期二";break; case3:week="星期三";break; case4:week="星期四";break; case5:week="星期五";break; case6:week="星期六";break; default:week="星期日";break; } vartime=""; time=year+"年"+month+"月"+date+"日"+week+""+hour+":"+minu+":"+sec; if(document.all){ bgclock.innerHTML="系統(tǒng)公告:["+time+"]" } vartimer= setTimeout("clockon(bgclock)",200); }
4、執(zhí)行
我們常常會(huì)遇到一種情況,setTimeout(code,millisec)中code包含形參,
例如:我們需要在1秒后向用戶提示的信息存儲(chǔ)于變量msg中,
var msg='1shaspassed!';
此時(shí)不論是直接執(zhí)行
setTimeout( alert(msg),1000);//alert(msg)會(huì)被立即執(zhí)行
還是
setTimeout(“alert(msg)”,1000);//系統(tǒng)報(bào)錯(cuò)msgisnotdefined(chrome)
都不能達(dá)到預(yù)期的目的,因?yàn)槎〞r(shí)器會(huì)努力地將code轉(zhuǎn)化為一個(gè)function對(duì)象,第一個(gè)錯(cuò)例里定時(shí)器立即執(zhí)行code希求返回一個(gè)function對(duì)象,結(jié)果撲了空;第二個(gè)雖然成功封裝出function對(duì)象,但是定時(shí)器在msg的可見域外執(zhí)行code,所以msg得不到正確的傳遞
推薦的解決辦法是使用匿名函數(shù)回調(diào)
var msg='1shaspassed!'; setTimeout(function(){ alert(msg); },1000);
第一個(gè)參數(shù)傳遞了一個(gè)會(huì)調(diào)用所需語句的function對(duì)象,這樣就解決了code帶參的問題。
以上就是本文的全部內(nèi)容,希望對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。
- JavaScript setTimeout()基本用法有哪些
- JavaScript setInterval()與setTimeout()計(jì)時(shí)器
- JavaScript定時(shí)器setTimeout()和setInterval()詳解
- 關(guān)于JS中setTimeout()無法調(diào)用帶參函數(shù)問題的解決方法
- js中setTimeout()與clearTimeout()用法實(shí)例淺析
- Javascript的setTimeout()使用閉包特性時(shí)需要注意的問題
- js setTimeout()函數(shù)介紹及應(yīng)用以倒計(jì)時(shí)為例
- javascript的setTimeout()使用方法總結(jié)
相關(guān)文章
如何將HTML字符轉(zhuǎn)換為DOM節(jié)點(diǎn)并動(dòng)態(tài)添加到文檔中詳解
這篇文章主要給大家介紹了關(guān)于如何將HTML字符轉(zhuǎn)換為DOM節(jié)點(diǎn)并動(dòng)態(tài)添加到文檔中的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起看看吧2018-08-08alixixi runcode.asp的代碼不錯(cuò)的應(yīng)用
alixixi runcode.asp的代碼不錯(cuò)的應(yīng)用...2007-08-08微信小程序?qū)崿F(xiàn)拉鏈?zhǔn)降幕瑒?dòng)驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)拉鏈?zhǔn)降幕瑒?dòng)驗(yàn)證,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05js使用棧來實(shí)現(xiàn)10進(jìn)制轉(zhuǎn)8進(jìn)制與取除數(shù)及余數(shù)
這篇文章主要介紹了js使用棧來實(shí)現(xiàn)10進(jìn)制轉(zhuǎn)8進(jìn)制、js取除數(shù)、余數(shù),需要的朋友可以參考下2014-06-06用VsCode編輯TypeScript的實(shí)現(xiàn)方法
這篇文章主要介紹了用VsCode編輯TypeScript的實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05