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

         回武汉隔离的第二天打卡,武汉加油,逆战必胜!今天想和大家简单聊一下js定时器的问题。

         1.setTimeout 延时器 在指定时间后执行一次,注意只会执行一次

    当然有的时候我们想用延时器做出定时器的效果,让它一直执行也可以,就是反复调用函数自身即可,代码如下: 

      fun();    

      function fun() {
        console.log(1)
        setTimeout("fun()",1000); //自身调用,重复执行
      }

  2.setInterval 定时器 在指定的时间间隔内重复的执行,如不清除,会一直执行下去

      setInterval(function () {

        console.log(1);

      },1000)

  3.值得注意的是在setTimeroutsetInterval的使用中,如果传入参数,那只能传入函数名:

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

    

 

posted on 2020-04-01 00:24  爱傻笑的菇凉°  阅读(4703)  评论(0编辑  收藏  举报

导航