关于JavaScript的window对象的计时器

最新推荐文章于 2020-06-05 01:51:31 发布

drinkingcode

最新推荐文章于 2020-06-05 01:51:31 发布

阅读量776

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/u010661782/article/details/49021089

版权

JavaScript 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

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方法" οnclick="fun()">
 <input type="button" value="演示clearTimeout方法" οnclick="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方法" οnclick="fun()">
 <input type="button" value="演示clearTimeout方法" οnclick="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方法" οnclick="fun4()">
 <input type="button" value="演示clearInterval方法" οnclick="fun3()">


 </body>
</html>

代码分析如下：

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