實(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的對象
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)用，請使用 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對象，第一個(gè)錯(cuò)例里定時(shí)器立即執(zhí)行code希求返回一個(gè)function對象，結(jié)果撲了空；第二個(gè)雖然成功封裝出function對象，但是定時(shí)器在msg的可見域外執(zhí)行code，所以msg得不到正確的傳遞
推薦的解決辦法是使用匿名函數(shù)回調(diào)
var msg='1shaspassed!';
setTimeout(function(){
alert(msg);
},1000);
第一個(gè)參數(shù)傳遞了一個(gè)會(huì)調(diào)用所需語句的function對象，這樣就解決了code帶參的問題。
以上就是本文的全部內(nèi)容，希望對大家學(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)文章
這篇文章主要介紹了關(guān)于layui的按鈕禁用與恢復(fù)方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
比較不錯(cuò)的js異或加解密實(shí)例代碼，方便學(xué)習(xí)js加解密的朋友2008-06-06
JavaScript獲取字符串實(shí)際長度(包含中英文)
這篇文章介紹了JavaScript獲取字符串實(shí)際長度(包含中英文)的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
boostrapTable的refresh和refreshOptions區(qū)別淺析
在使用bootstrapTable時(shí)，刷新數(shù)據(jù)有兩個(gè)方法refresh、refreshOptions，在其用法上有點(diǎn)區(qū)別，接下來通過本文給大家分享boostrapTable的refresh和refreshOptions的區(qū)別,需要的朋友可以參考下2017-01-01
這篇文章主要為大家詳細(xì)介紹了圖片懶加載imgLazyLoading.js的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
這篇文章主要介紹了詳解微信小程序開發(fā)之formId使用（模板消息），文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
js從10種顏色中隨機(jī)取色實(shí)現(xiàn)每次取出不同的顏色
昨天在做js 從10種顏色中隨機(jī)取色，并每次取出的顏色不同，具體的實(shí)現(xiàn)思路如下，感興趣的朋友可以參考下2013-10-10
Electron中關(guān)于靜態(tài)資源加載問題的解決方案
通常,我們在使用electron框架的時(shí)候會(huì)使用到loadFile/loadURL進(jìn)行頁面的加載,分別是加載本地文件和加載網(wǎng)絡(luò)文件,當(dāng)nuxtjs/nextjs想引入到electron中顯示時(shí),你會(huì)遇到資源路徑引用的問題,所以本文給大家介紹了Electron中關(guān)于靜態(tài)資源加載問題的解決方案2024-12-12
JavaScript Event學(xué)習(xí)第二章 Event瀏覽器兼容性
在這一章我將對重要的事件做一個(gè)概述，包括一些流行的瀏覽器的兼容性問題。2010-02-02