关于JavaScript的window对象的计时器

来源：互联网发布：java 命名下划线开头编辑：程序博客网时间：2024/06/06 10:55

setTimeou和clearTimeout

代码示例一如下：

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus?">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>window对象的计时器</title> </head><script type="text/javascript"><!--/*window对象的计时器：1.setTimeout(): 隔一段时间调用某个函数(只调用一次),返回的是一个计时器(理解成一个手表) clearTimeout() ：销毁由setTimeout()产生的计时器*/var t ; var t1 ;function fun(){//拿到p标签的主体内容var p= document.getElementById("p") ;var v = p.innerHTML ;//将主体内类转换为number,转换后赋值回去p.innerHTML = v*1-1 ;}t = setTimeout("fun()",1000) ;function fun2(){clearTimeout(t) ;}//--></script> <body> <p id = "p">10</p><br> <input type="button" value="演示setTimeout方法" onclick="fun()"> <input type="button" value="演示clearTimeout方法" onclick="fun2()"> </body></html>

代码分析如下：

由上述代码，我们可以知道：当执行t = setTimeout("fun()",1000) ;时
那么计时器会倒计时，当计时满1000ms时，那么就会执行fun()函数一次，
之后计时器就自行销毁，不再计时，那么fun()函数也就只会执行一次，就
不再继续执行；当然我们每按一次按钮“演示setTimeout方法”，其也只会执行一次

代码示例二如下：

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus?">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>window对象的计时器</title> </head><script type="text/javascript"><!--/*window对象的计时器：1.setTimeout(): 隔一段时间调用某个函数(只调用一次),返回的是一个计时器(理解成一个手表) clearTimeout() ：销毁由setTimeout()产生的计时器*/var t ; var t1 ;function fun(){//拿到p标签的主体内容var p= document.getElementById("p") ;var v = p.innerHTML ;//将主体内类转换为number,转换后赋值回去p.innerHTML = v*1-1 ;t = setTimeout("fun()",1000) ;}function fun2(){clearTimeout(t) ;}//--></script> <body> <p id = "p">10</p><br> <input type="button" value="演示setTimeout方法" onclick="fun()"> <input type="button" value="演示clearTimeout方法" onclick="fun2()"> </body></html>

代码分析如下：

在这段代码中，我们把t = setTimeout("fun()",1000) ;放置在了fun()函数里边，
那么，当我们按下按钮“演示setTimeout方法”时，就会执行fun()函数，进入fun()函数后，
在函数的后边就会执行t = setTimeout("fun()",1000) ;这条语句，在执行这条语句时，
先倒计时1000ms，当时间计时满了1000ms之后，就会执行fun()这个函数了，那么之前的
那个计时器也就自行销毁，可是，在执行fun()这个函数时，由于t = setTimeout("fun()",1000) ;
这条语句现在是fun()这个函数的一部分，所以其会再次被执行，重复上述动作，所以我们看到的
效果就是数字会一秒一秒往下减；此时，我们可以通过点击“演示clearTimeout方法”按钮，使用
clearTimeout(t) ;将其新产生的计时器给销毁掉，这样数字也就停止继续减下去了

setInterval和clearInterval

代码示例如下：

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus?">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>window对象的计时器</title> </head><script type="text/javascript"><!--/*window对象的计时器： setInterval(): 每隔一段时间调用某个函数(多次调用) clearInterval(): 销毁由setInterval()产生的计时器*/var t1 ;function fun1(){//拿到p标签的主体内容var p= document.getElementById("p") ;var v = p.innerHTML ;//将主体内类转换为number,转换后赋值回去p.innerHTML = v*1-1 ;}t1 = setInterval("fun1()",1000);function fun3(){clearInterval(t1) ;}function fun4(){t1 = setInterval("fun1()",1000);}//--></script> <body> <p id = "p">10</p><br> <input type="button" value="演示setInterval方法" onclick="fun4()"> <input type="button" value="演示clearInterval方法" onclick="fun3()"> </body></html>

代码分析如下：

在这个示例中，开始就会执行t1 = setInterval("fun1()",1000);这条语句，
等计时器计数到达1000ms之后，fun1()函数就会执行，计时器不会自行销毁，
又重新开始计时，满1000ms之后，又重新执行fun1()函数，此时，我们会看到
数字一直在减，若此时，我们按一下“演示clearInterval方法”按钮，那么，其就会
被销毁，也就可以看到数字停止减下去的效果。当我们按下“演示setInterval方法”时，
那么就会开始调用fun1()函数，又可以重新看到数字自动减下去的效果，当我们按下
“演示clearInterval方法”按钮时，由于t1是全局变量，所以数字就会停止减下去。

0 0