实例讲解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 相关文章推荐
JavaScript asp.net 获取当前超链接中的文本
Apr 14 Javascript
JQuery 遮罩层实现(mask)实现代码
Jan 09 Javascript
为超链接加上disabled后的故事
Dec 10 Javascript
js控制frameSet示例
Sep 10 Javascript
JS冒泡事件的快速解决方法
Dec 16 Javascript
BootStrap3使用错误记录及解决办法
Dec 22 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
Feb 08 Javascript
原生js封装添加class,删除class的实例
Nov 06 Javascript
vue实例中data使用return包裹的方法
Aug 27 Javascript
node将geojson转shp返回给前端的实现方法
May 29 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
Jun 05 Javascript
详解微信小程序工程化探索之webpack实战
Apr 20 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
Server.HTMLEncode让代码在页面里显示为源代码
2013/12/08 PHP
ThinkPHP3.1基础知识快速入门
2014/06/19 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
php实现等比例压缩图片
2018/07/26 PHP
Javascript 面向对象编程(coolshell)
2012/03/18 Javascript
Iframe实现跨浏览器自适应高度解决方法
2014/09/02 Javascript
解决jquery版本冲突的有效方法
2014/09/02 Javascript
初识Javascript小结
2015/07/16 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
JavaScript实现的MD5算法完整实例
2016/02/02 Javascript
Nodejs中session的简单使用及通过session实现身份验证的方法
2016/02/04 NodeJs
理解js回收机制通俗易懂版
2016/02/29 Javascript
jQuery validate验证插件使用详解
2016/05/11 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
2016/05/25 Javascript
Bootstrap 实现查询的完美方法
2016/10/26 Javascript
微信小程序 小程序制作及动画(animation样式)详解
2017/01/06 Javascript
jquery Form轻松实现文件上传
2017/05/24 jQuery
js图片查看器插件用法示例
2019/06/22 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
解决js中的setInterval清空定时器不管用问题
2020/11/17 Javascript
在Python中使用SimpleParse模块进行解析的教程
2015/04/11 Python
Python实现控制台进度条功能
2016/01/04 Python
Python随机数random模块使用指南
2016/09/09 Python
Django Rest framework频率原理与限制
2019/07/26 Python
Numpy将二维数组添加到空数组的实现
2019/12/05 Python
python代码实现图书管理系统
2020/11/30 Python
HTML5在手机端实现视频全屏展示方法
2020/11/23 HTML / CSS
Timex手表官网:美国运动休闲手表品牌
2017/01/28 全球购物
英国领先的豪华时尚家居网上商店:Amara
2019/08/12 全球购物
ORACLE第二个十问
2013/12/14 面试题
2014年党员加强作风建设思想汇报
2014/09/15 职场文书
2014年终个人总结报告
2015/03/09 职场文书
返乡农民工证明
2015/06/24 职场文书
初中数学教学随笔
2015/08/15 职场文书
关于nginx 实现jira反向代理的问题
2021/09/25 Servers