实例讲解JS中setTimeout()的用法
2016-01-28 00:00
841 查看
本文实例讲解了JS中setTimeout()的用法,分享给大家供大家参考,具体内容如下
效果图:
具体代码:
下面来说一说具体的用法:
1、参数
code (必需):(本意是代码的意思)要调用的函数后要执行的 JavaScript 代码串。
millisec(必需):在执行代码前需等待的毫秒数。
提示:
setTimeout() 只执行 code 一次。如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。
2、实例
3、实例(2)
4、执行
我们常常会遇到一种情况,setTimeout(code,millisec)中code包含形参,
例如:我们需要在1秒后向用户提示的信息存储于变量msg中,
此时不论是直接执行
还是
都不能达到预期的目的,因为定时器会努力地将code转化为一个function对象,第一个错例里定时器立即执行code希求返回一个function对象,结果扑了空;第二个虽然成功封装出function对象,但是定时器在msg的可见域外执行code,所以msg得不到正确的传递
推荐的解决办法是使用匿名函数回调
第一个参数传递了一个会调用所需语句的function对象,这样就解决了code带参的问题。
以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。
javascript setTimeout()传递函数参数(包括传递对象参数)
Js中setTimeout()和setInterval() 何时被调用执行的用法
JS中setTimeout()的用法详解
js setTimeout()函数介绍及应用以倒计时为例
Javascript的setTimeout()使用闭包特性时需要注意的问题
js中setTimeout()与clearTimeout()用法实例浅析
效果图:
具体代码:
<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程序设计有所帮助。
您可能感兴趣的文章:
JavaScript window.setTimeout() 的详细用法javascript setTimeout()传递函数参数(包括传递对象参数)
Js中setTimeout()和setInterval() 何时被调用执行的用法
JS中setTimeout()的用法详解
js setTimeout()函数介绍及应用以倒计时为例
Javascript的setTimeout()使用闭包特性时需要注意的问题
js中setTimeout()与clearTimeout()用法实例浅析
相关文章推荐
- js判断上传文件后缀名是否合法
- js+html5实现的自由落体运动效果代码
- js+canvas绘制五角星的方法
- JavaScript黑洞数字之运算路线查找算法(递归算法)实例
- 基于javascript实现checkbox复选框实例代码
- JavaScript统计字符串中每个字符出现次数完整实例
- 谈一谈javascript闭包
- js+canvas简单绘制圆圈的方法
- js+canvas绘制矩形的方法
- 基于JavaScript的操作系统你听说过吗?
- Javascript复制实例详解
- 探讨JavaScript语句的执行过程
- JS prototype笔记
- JS构造函数模式和原型模式笔记
- js瀑布流,实现图片自适应显示
- bean和json相互转换的工具(基于谷歌的gson)
- JavaScript 权威指南学习记录
- js正则表达式
- EL+servlet+jsp实现简单的投票程序版本二
- Three.js typescript definitely typed 文件