js定时器及定时器叠加问题
回武汉隔离的第二天打卡,武汉加油,逆战必胜!今天想和大家简单聊一下js定时器的问题。
1.setTimeout 延时器 在指定时间后执行一次,注意只会执行一次
当然有的时候我们想用延时器做出定时器的效果,让它一直执行也可以,就是反复调用函数自身即可,代码如下:
fun();
function fun() {
console.log(1)
setTimeout("fun()",1000); //自身调用,重复执行
}
2.setInterval 定时器 在指定的时间间隔内重复的执行,如不清除,会一直执行下去
setInterval(function () {
console.log(1);
},1000)
3.值得注意的是在setTimerout
和setInterval
的使用中,如果传入参数,那只能传入函数名:
setInterval(fn,1000)
4.下面问题来了,当我们在执行定时器的过程当中,会发现一件有趣的事情,那就是定时器会累加,看下面的例子:
当我们多次点击浏览器窗口时会发现,打印的速度越来越快,这就是我们所说的定时器累加。
var timer;
document.onclick = function() {
timer = setInterval(function(){
console.log(1)
},1000)
}
那么为什么会出现这样的情况呢?咱们举个例子,这就好像一个人每隔一秒钟使用一次打印机,点两下的话就相当于两个人去使用这个打印机,他们是同时进行的,因此每一秒打印会有多于原来两倍的速度。那么如何解决这个问题呢?
定时器累加问题的解决:先清除定时器,再使用定时器。代码示例如下:
var timer;
document.onclick = function() {
clearInterval(timer)
timer = setInterval(function(){
console.log(1)
},1000)
}