實例講解JS中setTimeout()的用法
編輯：關於JavaScript
本文實例講解了JS中setTimeout()的用法，分享給大家供大家參考，具體內容如下
效果圖：
具體代碼：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<script type="text/javascript">
var timer; //全局變量
var i=0; //變量初始化，全局變量
//定義函數：開始計時
function start()
{
//獲取id=result的對象
var obj = document.getElementById("result");
var str = "該程序已經運行了"+i+"秒！";
i++; //展開 i=i+1
//將變量str的內容寫入到id=result中去
obj.value = str; //給表單元素加內容，一般用value屬性
//除表單外的其它標記用JS寫內容，使用innerHTML
//設置延時器
timer = window.setTimeout("start()",10);
}
//定義函數：停止計時
function stop()
{
window.clearTimeout(timer);
}
</script>
</head>
<body>
<input type="button" id="result" value="該程序已經運行了0秒！" /><br />
<input type="button" onclick="start()" value="開始" />
<input type="button" onclick="stop()" value="停止" />
</body>
</html>
下面來說一說具體的用法：
1、參數
code （必需）：（本意是代碼的意思）要調用的函數後要執行的 JavaScript 代碼串。
millisec（必需）：在執行代碼前需等待的毫秒數。
提示：
setTimeout() 只執行 code 一次。如果要多次調用，請使用 setInterval() 或者讓 code 自身再次調用 setTimeout()。
2、實例
<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、實例（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="系統公告：["+time+"]"
}
vartimer=
setTimeout("clockon(bgclock)",200);
}
4、執行
我們常常會遇到一種情況，setTimeout(code,millisec)中code包含形參，
例如：我們需要在1秒後向用戶提示的信息存儲於變量msg中，
var msg='1shaspassed!';
此時不論是直接執行
setTimeout( alert(msg),1000);//alert(msg)會被立即執行
還是
setTimeout(“alert(msg)”,1000);//系統報錯msgisnotdefined（chrome）
都不能達到預期的目的，因為定時器會努力地將code轉化為一個function對象，第一個錯例裡定時器立即執行code希求返回一個function對象，結果撲了空；第二個雖然成功封裝出function對象，但是定時器在msg的可見域外執行code，所以msg得不到正確的傳遞
推薦的解決辦法是使用匿名函數回調
var msg='1shaspassed!';
setTimeout(function(){
alert(msg);
},1000);
第一個參數傳遞了一個會調用所需語句的function對象，這樣就解決了code帶參的問題。
以上就是本文的全部內容，希望對大家學習javascript程序設計有所幫助。
小編推薦
熱門推薦