实例讲解JS中setTimeout()的用法

前端技术 2023/09/01 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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/2565

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案