这篇文章详细介绍了JavaScript定时器及实例
有需要要的朋友可以参考一下
JS里设定延时
使用SetInterval和设定延时函数setTimeout 很类似setTimeout 运用在延迟一段时间再进行某项操作
setTimeout("function"time) 设置一个超时对象
setInterval("function"time) 设置一个超时对象
SetInterval为自动重复setTimeout不会重复
clearTimeout(对象) 清除已设置的setTimeout对象
clearInterval(对象) 清除已设置的setInterval对象
使用定时器实现JavaScript的延期执行或重复执行
window对象提供了两个方法来实现定时器的效果分别是windowsetTimeout()和windowsetInterval其中前者可以使一段代码在指定时间后运行而后者则可以使一段代码每过指定时间就运行一次它们的原型如下
windowsetTimeout(expressionmilliseconds);
windowsetInterval(expressionmilliseconds);
其 中expression可以是用引号括起来的一段代码也可以是一个函数名到了指定的时间系统便会自动调用该函数当使用函数名作为调用句柄时 不能带有任何参数而使用字符串时则可以在其中写入要传递的参数两个方法的第二个参数是milliseconds表示延时或者重复执行的毫秒数下 面分别介绍两种方法
．windowsetTimeout方法
该方法可以延时执行一个函数例如
复制代码 代码如下:
<script language="JavaScript" type="text/javascript">
<!
function hello(){
alert("hello");
}
window
setTimeout(hello
);
//
>
</script>
这段代码将使得页面打开秒钟后显示对话框“hello”其中最后一句也可以写为
复制代码 代码如下:
window
setTimeout("hello()"
);
读者可以体会它们的差别在windowsetInterval方法中也有这样的性质
如果在延时期限到达之前取消延执行可以使用windowclearTimeout(timeoutId)方法该方法接收一个id表示一个定时器这个id是由setTimeout方法返回的例如
复制代码 代码如下:
<script language="JavaScript" type="text/javascript">
<!
function hello(){
alert("hello");
}
var id=window
setTimeout(hello
);
document
onclick=function(){
window
clearTimeout(id);
}
//
>
</script>
这样如果要取消显示只需单击页面任何一部分就执行了windowclearTimeout方法使得超时操作被取消
．windowsetInterval方法
该 方法使得一个函数每隔固定时间被调用一次是一个很常用的方法如果想要取消定时执行和clearTimeout方法类似可以调用 windowclearInterval方法clearInterval方法同样接收一个setInterval方法返回的值作为参数例如
复制代码 代码如下:
//定义一个反复执行的调用
var id=window
setInterval("somefunction"
);
//取消定时执行
window
clearInterval(id);
上 面的代码仅用于说明怎样取消一个定时执行实际上在很多场合都需要用到setInterval方法下面将设计一个秒表来介绍setInterval 函数的用途该秒表将包括两个按钮和一个用于显示时间的文本框当单击开始按钮时开始计时最小单位为秒此时再次单击按钮则停止计时文本框显 示经过的时间另外一个按钮用于将当前时间清零其实现代码如下
复制代码 代码如下:
<!DOCTYPE HTML PUBLIC "
//W
C//DTD HTML
Transitional//EN">
<html>
<head>
<title> New Document </title>
</head>
<body>
<form action="somepage
asp">
<input type="text" value="
" name="txt
"/>
<input type="button" value="开始" name="btnStart"/>
<input type="button" value="重置" name="btnReset"/>
</form>
</body>
</html>
<script language="JavaScript" type="text/javascript">
<!
//获取表单中的表单域
var txt=document
forms[
]
elements["txt
"];
var btnStart=document
forms[
]
elements["btnStart"];
var btnReset=document
forms[
]
elements["btnReset"]
//定义定时器的id
var id;
//每
毫秒该值增加
var seed=
;
btnStart
onclick=function(){
//根据按钮文本来判断当前操作
if(this
value=="开始"){
//使按钮文本变为停止
this
value="停止";
//使重置按钮不可用
btnReset
disabled=true;
//设置定时器
每
s跳一次
id=window
setInterval(tip
);
}else{
//使按钮文本变为开始
this
value="开始";
//使重置按钮可用
btnReset
disabled=false;
//取消定时
window
clearInterval(id);
}
}
//重置按钮
btnReset
onclick=function(){
seed=
;
}
//让秒表跳一格
function tip(){
seed++;
txt
value=seed/
;
}
//
>
</script>
给定时器调用传递参数
无论是windowsetTimeout还是windowsetInterval在使用函数名作为调用句柄时都不能带参数而在许多场合必须要带参数这就需要想方法解决例如对于函数hello(_name)它用于针对用户名显示欢迎信息
复制代码 代码如下:
var userName="jack";
//根据用户名显示欢迎信息
function hello(_name){
alert("hello
"+_name);
}
这时如果企图使用以下语句来使hello函数延迟秒执行是不可行的
复制代码 代码如下:
window
setTimeout(hello(userName)
);
这将使hello函数立即执行并将返回值作为调用句柄传递给setTimeout函数其结果并不是程序需要的而使用字符串形式可以达到想要的结果
复制代码 代码如下:
window
setTimeout("hello(userName)"
);
这里的字符串是一段JavaScript代码其中的userName表示的是变量但这种写法不够直观而且有些场合必须使用函数名下面用一个小技巧来实现带参数函数的调用
复制代码 代码如下:
<script language="JavaScript" type="text/javascript">
<!
var userName="jack";
//根据用户名显示欢迎信息
function hello(_name){
alert("hello
"+_name);
}
//创建一个函数
用于返回一个无参数函数
function _hello(_name){
return function(){
hello(_name);
}
}
window
setTimeout(_hello(userName)
);
//
>
</script>
这 里定义了一个函数_hello用于接收一个参数并返回一个不带参数的函数在这个函数内部使用了外部函数的参数从而对其调用不需要使用参数在 windowsetTimeout函数中使用_hello(userName)来返回一个不带参数的函数句柄从而实现了参数传递的功能
window对象有两个主要的定时方法分别是setTimeout 和 setInteval 他们的语法基本上相同但是完成的功能取有区别
setTimeout方法是定时程序也就是在什么时间以后干什么干完了就拉倒
setInterval方法则是表示间隔一定时间反复执行某操作
JS里设定延时
使用SetInterval和设定延时函数setTimeout 很类似setTimeout 运用在延迟一段时间再进行某项操作
setTimeout("function"time) 设置一个超时对象
setInterval("function"time) 设置一个超时对象
SetInterval为自动重复setTimeout不会重复
clearTimeout(对象) 清除已设置的setTimeout对象
clearInterval(对象) 清除已设置的setInterval对象
如果用setTimeout实现setInerval的功能就需要在执行的程序中再定时调用自己才行如果要清除计数器需要根据使用的方法不同调用不同的清除方法
例如
复制代码 代码如下:
tttt=setTimeout(
northsnow()
);
clearTimeout(tttt);
或者
复制代码 代码如下:
tttt=setInterval(
northsnow()
);
clearInteval(tttt);
举一个例子
复制代码 代码如下:
<div id="liujincai"></div>
<input type="button" name="start" value="start" onclick=
startShow();
>
<input type="button" name="stop" value="stop" onclick="stop();">
<script language="javascript">
var intvalue=
;
var timer
=null;
function startShow()
{
liujincai
innerHTML=liujincai
innerHTML + " " + (intvalue ++)
toString();
timer
=window
setTimeout("startShow()"
);
}
function stop()
{
window
clearTimeout(timer
);
}
</script>
或者
复制代码 代码如下:
<div id="liujincai"></div>
<input type="button" name="start" value="start" onclick=timer=windowsetInterval("startShow()");//startShow();>
<input type="button" name="stop" value="stop" onclick="stop();">
<script language="javascript">
var intvalue=;
var timer=null;
function startShow()
{
liujincaiinnerHTML=liujincaiinnerHTML + " " + (intvalue ++)toString();
}
function stop()
{
windowclearInterval(timer);
}
</script>
