Heim > Artikel > Web-Frontend > 实例讲解JS中setTimeout()的用法_javascript技巧
实例讲解JS中setTimeout()的用法_javascript技巧
- WBOYOriginal
- 2016-05-16 15:17:301829Durchsuche
本文实例讲解了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程序设计有所帮助。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：基于javascript实现全国省市二级联动下拉选择菜单_javascript技巧Nächster Artikel：JS实现动态生成表格并提交表格数据向后端_javascript技巧