实例讲解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 相关文章推荐
HTA版JSMin(省略修饰语若干)基于javascript语言编写
Dec 24 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
May 19 Javascript
js和jQuery设置Opacity半透明 兼容IE6
May 24 Javascript
jQuery与JavaScript节点创建方法的对比
Nov 18 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
Dec 05 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
Dec 11 Javascript
vue移动UI框架滑动加载数据的方法
Mar 12 Javascript
vue滚动固定顶部及修改样式的实例代码
May 30 Javascript
express框架下使用session的方法
Jul 31 Javascript
vue keep-alive 动态删除组件缓存的例子
Nov 04 Javascript
es6中Promise 对象基本功能与用法实例分析
Feb 23 Javascript
javascript实现滚动条效果
Mar 24 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.ini修改php上传文件大小限制的方法详解
2013/06/17 PHP
linux下安装php的memcached客户端
2014/08/03 PHP
PHP实现对站点内容外部链接的过滤方法
2014/09/10 PHP
深入解析PHP中SESSION反序列化机制
2017/03/01 PHP
深入理解 PHP7 中全新的 zval 容器和引用计数机制
2018/10/15 PHP
利用Jquery实现可多选的下拉框
2014/02/21 Javascript
js函数与php函数的区别实例浅析
2015/01/12 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
2016/10/10 Javascript
jQuery实现可移动选项的左右下拉列表示例
2016/12/26 Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
2017/01/08 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
2017/02/17 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
2017/07/23 Javascript
JS实现字符串去重及数组去重的方法示例
2018/04/21 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
2018/07/13 Javascript
vue项目部署到Apache服务器中遇到的问题解决
2018/08/24 Javascript
vue中,在本地缓存中读写数据的方法
2018/09/21 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
jquery实现简易验证插件封装
2020/09/13 jQuery
使用typescript快速开发一个cli的实现示例
2020/12/09 Javascript
uni-app 自定义底部导航栏的实现
2020/12/11 Javascript
Python GAE、Django导出Excel的方法
2008/11/24 Python
多线程爬虫批量下载pcgame图片url 保存为xml的实现代码
2013/01/17 Python
python中list常用操作实例详解
2015/06/03 Python
Python装饰器基础详解
2016/03/09 Python
Ubuntu下使用Python实现游戏制作中的切分图片功能
2018/03/30 Python
PyTorch线性回归和逻辑回归实战示例
2018/05/22 Python
python opencv捕获摄像头并显示内容的实现
2019/07/11 Python
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
html5的canvas方法使用指南
2014/12/15 HTML / CSS
iPad和Surface Pro蓝牙键盘:Brydge
2018/11/10 全球购物
Stuarts London美国/加拿大:世界领先的独立男装零售商之一
2019/03/18 全球购物
服装厂厂长职责
2013/12/16 职场文书
小学数学课后反思
2014/04/23 职场文书
公安机关纪律作风整顿个人剖析材料材料
2014/10/10 职场文书
中标通知书范本
2015/04/17 职场文书