js定时器复习

最新推荐文章于 2023-03-19 13:24:21 发布

山雀~

最新推荐文章于 2023-03-19 13:24:21 发布

阅读量370

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_55608297/article/details/127080179

版权

今天学习的时候看到了定时器，有些知识有点忘了系统补充一下

定时调用setInterval

可以将一个函数每隔一段时间执行一次

setInterval（参数1，参数2）

参数1 ----回调函数，该函数每隔一段时间就会执行一次

参数2 ----每次调用执行的时间，单位是毫秒
例子：数字开启跳动

<p id="num">1<p/>

var num =document.getElementById("num");
			var couter = 1 ; 
			 setInterval(function(){
			num.innerHTML = couter++;
			},500);

如上所示，p标签里面的数字就会每隔500毫秒（也就是0.5秒）执行一次，从1开始跳动，但是，因为couter一直出于自增，所以这个定时器函数会一直停不下来…从1到正无穷~

在日常开发中，我们想要把定时器关闭，应该怎么做呢？

使用clearInterval()

clearInterval()

clearInterval（参数）可以用来关闭一个定时器；

而这里面的参数写的又应该是什么呢？

从上面的例子中，setInterval（）可以拥有一个返回值，作为这个定时器的标识（timer）

我们将上面的例子进行改进，在setInterval（）函数的前面添加一个标识timer

var num =document.getElementById("num");
			var couter = 1 ; 
			var timer =  setInterval(function(){
			num.innerHTML = couter++;
			},500);

当我们想当数字跳到20的时候，就不再变化的时候，可以这样写

var num =document.getElementById("num");
			var couter = 1 ; 
			var timer =  setInterval(function(){
				num.innerHTML = couter++;
				//alert(num.innerHTML);
				if(couter == 11){
					clearInterval(timer);
				}
			},500);

设置timer标识的好处是，一个是当setInterval（）想要关闭的时候，cleanInterval（）可以识别出是哪个定时器想要关闭。

//定义多个定时器
var timer1 =  setInterval(function(){....},500);
var timer2 =  setInterval(function(){....},400);
var timer3 =  setInterval(function(){....},1000);
.....
 
//关闭定时器
cleanInterval(timer1);
cleanInterval(timer2);
cleanInterval(timer3);
.....

setTimeout()延时调用

setTimeout（参数1，参数2）

参数1 — 调用的函数

参数2 — 多少秒后执行的时间，单位为毫秒

setTimeout（function(){…}，1000）

setTimeout(function(){
 alert("hello js");
},2000)
 
//两秒后执行alert函数 并且只执行一次，就不会再执行

setInterval(function(){…}，参数2)和setTimeout(function(){…}，参数2)
共同点：

都是定时器调用，且调用的都是函数。

不同点：

setInterval()是每隔一段时间之后执行一次且有setInterout来关闭。可以执行N次

setTimeout()是每隔一段时间之后执行一次，没有对应的关闭，执行一次就没了。只能执行1次

当然，setTimeout也有一种特殊写法，可以使它和setInterval()一样执行很多次

function fun(){
    alert("hello,js");
    setTimeout(fun(),1000);//不断的调用函数fun，则形成了和setInterval一样的执行很多次
}
fun();

但是这样写会让fun函数一直执行没有停止，这个时候要想来关闭setTimeout只能靠一些循环语句来限定它什么时候执行

function fun(){
    var i=0;
    if(i<20){
    i++;
    alert("hello,js");
    setTimeout(fun(),1000);//不断的调用函数fun，则形成了和setInterval一样的执行很多次
    }
}
fun();