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


Posted in Javascript onJanuary 28, 2016

本文实例讲解了JS中setTimeout()的用法,分享给大家供大家参考,具体内容如下

效果图:

实例讲解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程序设计有所帮助。

Javascript 相关文章推荐
破除一些网站复制、右键限制
Nov 04 Javascript
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
Aug 13 Javascript
js获取url参数的使用扩展实例
Dec 29 Javascript
Jquery选择器 $实现原理
Dec 02 Javascript
键盘KeyCode值列表汇总
Nov 26 Javascript
js中style.display=&quot;&quot;无效的解决方法
Oct 30 Javascript
JavaScript自定义数组排序方法
Feb 12 Javascript
JavaScript中用let语句声明作用域的用法讲解
May 20 Javascript
十个免费的web前端开发工具详细整理
Sep 18 Javascript
Vue2.0+ElementUI实现表格翻页的实例
Oct 23 Javascript
详解Vue 如何监听Array的变化
Jun 06 Javascript
浅谈vue项目,访问路径#号的问题
Aug 14 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
Jan 28 #Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
Jan 28 #Javascript
基于javascript实现动态显示当前系统时间
Jan 28 #Javascript
jQuery实现div随意拖动的实例代码(通用代码)
Jan 28 #Javascript
jQuery+css实现炫目的动态块漂移效果
Jan 28 #Javascript
使用node+vue.js实现SPA应用
Jan 28 #Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
Jan 28 #Javascript
You might like
使用PHP实现下载CSS文件中的图片
2015/12/06 PHP
PHP模拟post提交数据方法汇总
2016/02/16 PHP
php实现在新浪云中使用imagick生成缩略图并上传的方法
2016/09/26 PHP
PHP设计模式之装饰器模式定义与用法详解
2018/04/02 PHP
setInterval 和 setTimeout会产生内存溢出
2008/02/15 Javascript
用正则表达式 动态创建/增加css style script 兼容IE firefox
2009/03/10 Javascript
浏览器中url存储的JavaScript实现
2015/07/07 Javascript
原生JavaScript实现滚动条效果
2020/03/24 Javascript
详解JavaScript中数组的reduce方法
2016/12/02 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
2017/01/10 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
2017/03/23 jQuery
JS实现的ajax和同源策略(实例讲解)
2017/12/01 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
2017/12/26 Javascript
浅谈VUE监听窗口变化事件的问题
2018/02/24 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
2018/09/27 Javascript
JavaScript或jQuery 获取option value值方法解析
2020/05/12 jQuery
JavaScript经典案例之简易计算器
2020/08/24 Javascript
解决vue项目 build之后资源文件找不到的问题
2020/09/12 Javascript
electron踩坑之dialog中的callback解决
2020/10/06 Javascript
jquery自定义组件实例详解
2020/12/31 jQuery
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
python中异常报错处理方法汇总
2016/11/20 Python
python3中int(整型)的使用教程
2017/03/23 Python
pandas 两列时间相减换算为秒的方法
2018/04/20 Python
python中csv文件的若干读写方法小结
2018/07/04 Python
基于PyQt4和PySide实现输入对话框效果
2019/02/27 Python
简单总结CSS3中视窗单位Viewport的常见用法
2016/02/04 HTML / CSS
CSS3实现图片抽屉式效果的示例代码
2019/11/06 HTML / CSS
如何理解transaction事务的概念
2015/05/27 面试题
机电一体化应届生求职信范文
2014/01/24 职场文书
应聘文员自荐信范文
2014/03/11 职场文书
国际商务英语专业求职信
2014/07/08 职场文书
2014离婚协议书范文
2014/09/10 职场文书
2015年度学校应急管理工作总结
2015/10/22 职场文书
详解Js模块化的作用原理和方案
2021/04/29 Javascript
apache ftpserver搭建ftp服务器
2022/05/20 Servers