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 相关文章推荐
js下利用控制器载入对应脚本
Jul 17 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
Sep 29 Javascript
SWFUpload多文件上传及文件个数限制的方法
May 31 Javascript
JS数组去掉重复数据只保留一条的实现代码
Aug 11 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
Aug 15 Javascript
JavaScript重定向URL参数的两种方法小结
Oct 19 Javascript
jQuery页面弹出框实现文件上传
Feb 09 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
Jan 15 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
May 07 Javascript
JavaScript从原型到原型链深入理解
Jun 03 Javascript
小程序实现列表展开收起效果
Jul 29 Javascript
jQuery实现手风琴特效
Jan 11 jQuery
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
C# Assembly类访问程序集信息
2009/06/13 PHP
PHP 开发环境配置(Zend Studio)
2010/04/28 PHP
PHP实现文件下载断点续传详解
2014/10/15 PHP
thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
2016/07/21 PHP
获取内联和链接中的样式(js代码)
2013/04/11 Javascript
jquery easyui滚动条部分设置介绍
2013/09/12 Javascript
jQuery获取节点和子节点文本的方法
2014/07/22 Javascript
js函数内变量的作用域分析
2015/01/12 Javascript
原生js实现自由拖拽弹窗代码demo
2016/06/29 Javascript
终于实现了!精彩的jquery弹幕效果
2016/07/18 Javascript
将JSON字符串转换成Map对象的方法
2016/11/30 Javascript
NodeJs测试框架Mocha的安装与使用
2017/03/28 NodeJs
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
2018/01/26 Javascript
微信小程序自定义tab实现多层tab嵌套功能
2018/06/15 Javascript
微信小程序实现的自定义分享功能示例
2019/02/12 Javascript
富文本编辑器vue2-editor实现全屏功能
2019/05/26 Javascript
浅谈VUE中演示v-for为什么要加key
2020/01/16 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
2020/04/13 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
2020/11/17 Javascript
详解JavaScript中的链式调用
2020/11/27 Javascript
[01:25:09]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第二场
2014/05/24 DOTA
Python采集代理ip并判断是否可用和定时更新的方法
2018/05/07 Python
python3.5绘制随机漫步图
2018/08/27 Python
Django获取应用下的所有models的例子
2019/08/30 Python
Django DRF APIView源码运行流程详解
2020/08/17 Python
2020年10款优秀的Python第三方库,看看有你中意的吗?
2021/01/12 Python
Python调用SMTP服务自动发送Email的实现步骤
2021/02/07 Python
CSS3不透明度实例讲解
2016/04/26 HTML / CSS
新秀丽官方旗舰店:Samsonite拉杆箱、双肩包、皮具
2018/03/05 全球购物
Funko官方商店:源自美国,畅销全球搪胶收藏玩偶
2018/09/15 全球购物
高中毕业自我鉴定
2013/12/16 职场文书
经典演讲稿开场白
2014/08/25 职场文书
运动会通讯稿600字
2015/07/20 职场文书
python中subplot大小的设置步骤
2021/06/28 Python
使用CSS实现一个搜索引擎的原理解析
2021/09/25 HTML / CSS
Oracle查看表空间使用率以及爆满解决方案详解
2022/07/23 Oracle