JavaScript window.setTimeout() 的详细用法


Posted in Javascript onNovember 04, 2009

js的setTimeout方法用处比较多,通常用在页面刷新了、延迟执行了等等。但是很多javascript新手对setTimeout的用法还是不是很了解。虽然我学习和应用javascript已经两年多了,但是对setTimeout方法,有时候也要查阅资料。今天对js的setTimeout方法做一个系统地总结。

setInterval与setTimeout的区别
说道setTimeout,很容易就会想到setInterval,因为这两个用法差不多,但是又有区别,今天一起总结了吧!

setTimeout
定义和用法: setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式。

语法: setTimeout(code,millisec)  

参数: code (必需):要调用的函数后要执行的 JavaScript 代码串。millisec(必需):在执行代码前需等待的毫秒数。  提示: setTimeout() 只执行 code 一次。如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

setInterval
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法: setInterval(code,millisec[,"lang"])

参数: code 必需。要调用的函数或要执行的代码串。millisec 必须。周期性执行或调用 code 之间的时间间隔,以毫秒计。

返回值: 一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

区别
通过上面可以看出,setTimeout和setinterval的最主要区别是:

setTimeout只运行一次,也就是说设定的时间到后就触发运行指定代码,运行完后即结束。如果运行的代码中再次运行同样的setTimeout命令,则可循环运行。(即 要循环运行,需函数自身再次调用 setTimeout())

而 setinterval是循环运行的,即每到设定时间间隔就触发指定代码。这是真正的定时器。

setinterval使用简单,而setTimeout则比较灵活,可以随时退出循环,而且可以设置为按不固定的时间间隔来运行,比如第一次1秒,第二次2秒,第三次3秒。

我个人而言,更喜欢用setTimeout多一些!

setTimeout的用法
让我们一起来运行一个案例,首先打开记事本,将下面代码贴入,运行一下效果!

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<h1> <font color=blue> 三水点靠木示范网页 </font> </h1>
<p> 请等三秒!</p>

<script>
setTimeout("alert('对不起, 三水点靠木要你等候多时')", 3000 )
</script>

</body> 
</html>

页面会在停留三秒之后弹出对画框!这个案例应用了setTimeout最基本的语法,setTimeout不会自动重复执行!

setTimeout也可以执行function,还可以不断重复执行!我们再来一起做一个案例:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
var x = 0
function countSecond()
{
  x = x+1
  document.haorooms.haoroomsinput.value=x
  setTimeout("countSecond()", 1000)
}
</script>
</head>
<html>
<body>

<form name="haorooms">
  <input type="text" name="haoroomsinput"value="0" size=4 >
</form>

<script>
countSecond()
</script>

</body> </html>

你可以看到input文本框中的数字在一秒一秒的递增!所以,setTimeout也可以制作网页中的时间跳动!

没有案例,学习起来不会很快,我们再来一起做一个例子,计算你在haorooms某个页面的停留时间:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
x=0
y=-1
function countMin()
{ y=y+1
  document.displayMin.displayBox.value=y
  setTimeout("countMin()",60000)
}
function countSec()
{ x = x + 1
  z =x % 60
  document.displaySec.displayBox.value=z
  setTimeout("countSec()", 1000)
}
</script> </head>
<body>
<table> <tr valign=top> <td> 你在haorooms博客中的停留时间是: </td>
<td> 
<form name=displayMin>
  <input type=text name=displayBox value=0 size=4 >
</form> 
</td>
<td> 分 </td>
<td> 
<form name=displaySec> </td>
<td> <input type=text name=displayBox value=0 size=4 >
</form>
 </td>
<td> 秒。</td> </tr>
 </table>
<script>
countMin()
countSec()
</script>
</body>
</html>

怎么样,通过上面的例子,对setTimeout()的用法,相信你都了解了吧!

clearTimeout( )
我们再来一起看一下 clearTimeout( ),

clearTimout( ) 有以下语法 :  

clearTimeout(timeoutID)

要使用 clearTimeout( ), 我们设定 setTimeout( ) 时 , 要给予这 setTimout( ) 一个名称 , 这名称就是 timeoutID , 我们叫停时 , 就是用这 timeoutID 来叫停 , 这是一个自定义名称 , 但很多人就以 timeoutID 为名。

在下面的例子 , 设定两个 timeoutID, 分别命名为 meter1 及 meter2, 如下 :

timeoutID  ↓ meter1 = setTimeout(“count1( )”, 1000) meter2 = setTimeout(“count2( )”, 1000)

使用这 meter1 及 meter2 这些 timeoutID 名称 , 在设定 clearTimeout( ) 时 , 就可指定对哪一个 setTimeout( ) 有效 , 不会扰及另一个 setTimeout( ) 的操作。

下面请看 clearTimeout()的案例

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script>
x = 0
y = 0
function count1()
{ x = x + 1
  document.display1.box1.value = x
  meter1=setTimeout("count1()", 1000)
}
function count2()
{ y = y + 1
  document.display2.box2.value = y
  meter2=setTimeout("count2()", 1000)
}
</script> </head>
<body> 
<p> </br>
<form name="display1">
  <input type="text" name="box1" value="0" size=4 >
  <input type=button value="停止计时" onClick="clearTimeout(meter1) " >
  <input type=button value="继续计时" onClick="count1() " >
</form>
<p>
<form name="display2">
  <input type="text" name="box2" value="0" size=4 >
  <input type=button value="停止计时" onClick="clearTimeout(meter2) " >
  <input type=button value="继续计时" onClick="count2() " >
</form>

<script>
  count1()
  count2()
</script>
</body>
</html>

尾声
通过上面的讲解,不知道您对setTimeout了解了没有,下次使用setTimeout会不会很熟练?会不会再把setTimeout和setInterval搞混了?要是您有什么不了解的地方,可以相互交流,共同提高,谢谢!

setTimeout (表达式,延时时间)
setTimeout(表达式,交互时间)
延时时间/交互时间是以豪秒为单位的(1000ms=1s) setTimeout 在执行时,是在载入后延迟指定时间后,去执行一次表达式,仅执行一次
setTimeout 在执行时,它从载入后,每隔指定的时间就执行一次表达式

1,基本用法:
执行一段代码:

var i=0; 

setTimeout("i+=1;alert(i)",1000);

执行一个函数:
var i=0; 

setTimeout(function(){i+=1;alert(i);},1000);

//注意比较上面的两种方法的不同。

下面再来一个执行函数的:

var i=0; 

function test(){ 

i+=1; 

alert(i); 

} 

setTimeout("test()",1000);

也可以这样:
setTimeout(test,1000);

总结:
setTimeout的原型是这样的:
iTimerID = window.setTimeout(vCode, iMilliSeconds [, sLanguage])

setTimeout有两种形式

setTimeout(code,interval)
setTimeout(func,interval,args)

其中code是一个字符串
func是一个函数.

注意"函数"的意义,是一个表达式,而不是一个语句.
比如你想周期性执行一个函数
function a(){
//...
}
可写为
setTimeout("a()",1000)

setTimeout(a,1000)

这里注意第二种形式中,是a,不要写成a(),切记!!!
展开来说,不管你这里写的是什么,如果是一个变量,一定是一个指向某函数的变量;如果是个函数,那它的返回值就 要是个函数

2,用setTimeout实现setInterval的功能
思路很简单,就是在一个函数中调用不停执行自己,有点像递归

var i=0; 

function xilou(){ 

i+=1; 

if(i>10){alert(i);return;} 

setTimeout("xilou()",1000); 

//用这个也可以 

//setTimeout(xilou,1000); 

}

3,在类中使用setTimeout
终于到正题了,其实在类中使用大家遇到的问题都是关于this的,只要解决了这个this的问题就万事无忧了。
呵呵。让我们来分析一下:
function xilou(){ 
this.name="xilou"; 

this.sex="男"; 

this.num=0; 

} 

xilou.prototype.count=function(){ 

this.num+=1; 

alert(this.num); 

if(this.num>10){return;} 

//下面用四种方法测试,一个一个轮流测试。 

setTimeout("this.count()",1000);//A:当下面的x.count()调用时会发生错误:对象不支持此属性或方法。 

setTimeout("count()",1000);//B:错误显示:缺少对象 

setTimeout(count,1000);//C:错误显示:'count'未定义 

//下面是第四种 

var self=this; 

setTimeout(function(){self.count();},1000);//D:正确 

} 

var x=new xilou(); 

x.count();

错误分析:
A:中的this其实指是window对象,并不是指当前实例对象
B:和C:中的count()和count其实指的是单独的一个名为count()的函数,但也可以是window.count(),因为window.count()可以省略为count()
D:将变量self指向当前实例对象,这样js解析引擎就不会混肴this指的是谁了。

话说回来,虽然我们知道setTimeout("this.count()",1000)中的this指的是window对象,但还是不明白为什么会是
window对象^_^(有点头晕...)
那我们可以想象一下这个setTimeout是怎样被定义的:
setTimeout是window的一个方法,全称是这样的:window.setTimeout()
那应该是这样被定义的:

window.setTimeout=function(vCode, iMilliSeconds [, sLanguage]){ 

//.....代码 

return timer//返回一个标记符 

}

所以当向setTimeout()传入this的时候,当然指的是它所属的当前对象window了。
Javascript 相关文章推荐
JavaScript监测ActiveX控件是否已经安装过的代码
Sep 02 Javascript
ExtJS 下拉多选框lovcombo
May 19 Javascript
js 获取(接收)地址栏参数值的方法
Apr 01 Javascript
实测jquery data()如何存值
Aug 18 Javascript
JavaScript Math.ceil() 函数使用介绍
Dec 11 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
Oct 26 Javascript
微信小程序 PHP后端form表单提交实例详解
Jan 12 Javascript
JavaScript纯色二维码变成彩色二维码
Jul 23 Javascript
JS实现提交表单前的数字及邮箱校检功能
Nov 13 Javascript
JavaScript中Object基础内部方法图
Feb 05 Javascript
17道题让你彻底理解JS中的类型转换
Aug 08 Javascript
Vue的编码技巧与规范使用详解
Aug 28 Javascript
javascript 限制输入脚本大全
Nov 03 #Javascript
jquery ajax 检测用户注册时用户名是否存在
Nov 03 #Javascript
基于JQuery框架的AJAX实例代码
Nov 03 #Javascript
Jquery AJAX 框架的使用方法
Nov 03 #Javascript
JQuery打造PHP的AJAX表单提交实例
Nov 03 #Javascript
jQuery get和post 方法传值注意事项
Nov 03 #Javascript
js window.onload 加载多个函数的方法
Nov 02 #Javascript
You might like
利用discuz自带通行证整合dedecms的方法以及文件下载
2007/03/06 PHP
php fsockopen中多线程问题的解决办法[翻译]
2011/11/09 PHP
PHP中使用asort进行中文排序失效的问题处理
2014/08/18 PHP
php示例详解Constructor Prototype Pattern 原型模式
2015/10/15 PHP
phalcon框架使用指南
2016/02/23 PHP
如何使用PHP给图片加水印
2016/10/12 PHP
基于PHP实现微信小程序客服消息功能
2019/08/12 PHP
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
2010/08/16 Javascript
jquery购物车实时结算特效实现思路
2013/09/23 Javascript
javascript代码运行不出来执行错误的可能情况整理
2013/10/18 Javascript
介绍一个简单的JavaScript类框架
2015/06/24 Javascript
多种方式实现js图片预览
2016/12/12 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
2017/03/03 Javascript
解决ionic和angular上拉加载的问题
2017/08/03 Javascript
bootstrap modal+gridview实现弹出框效果
2017/08/15 Javascript
JS实现图片放大镜插件详解
2017/11/06 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
2018/01/03 Javascript
js 数组详细操作方法及解析合集
2018/06/01 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
python判断端口是否打开的实现代码
2013/02/10 Python
分享python数据统计的一些小技巧
2016/07/21 Python
python 文件查找及内容匹配方法
2018/10/25 Python
Python基于OpenCV实现人脸检测并保存
2019/07/23 Python
基于python调用psutil模块过程解析
2019/12/20 Python
Html5之svg可缩放矢量图形_动力节点Java学院整理
2017/07/17 HTML / CSS
HTML 5.1来了 9月份正式发布 更新内容预览
2016/04/26 HTML / CSS
茵宝(Umbro)英国官方商店:英国足球服装生产商
2016/12/29 全球购物
捷克厨房用品购物网站:Tescoma
2018/07/13 全球购物
意大利在线大学图书馆:Libreria universitaria
2019/07/16 全球购物
Steiff台湾官网:德国金耳釦泰迪熊
2019/12/26 全球购物
Nike意大利官网:Nike.com IT
2020/01/19 全球购物
大学同学聚会邀请函
2014/01/29 职场文书
企业安全生产演讲稿
2014/05/09 职场文书
自我管理的活动方案
2014/08/25 职场文书
经验交流材料格式
2014/12/30 职场文书
Python进度条的使用
2021/05/17 Python