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)
　　　　　　}

巴特西

js定时器及定时器叠加问题

最新文章

热门文章