定时器

1、setTimeout定时器
  该定时器只执行一次,执行完毕之后自动销毁

setTimeout(() => {
      alert();
    }, 1000);

2、setInterval定时器
  该定时器启用之后无限循环,直到手动销毁该定时器

const timer = setInterval(() => {
      alert();
    }, 5000);
clearInterval(timer);   

3、vue中使用定时器
  vue中使用定时器和在普通应用场景下使用是一样的,不同的是在什么情况下销毁定时器。
  举个例子:如果我们需要自己做一个轮播图,那么我们就需要在组件渲染的时候写一个循环定时器,当组件销毁的时候清除定时器。
  1)、第一种写法,我们利用vue的生命周期钩子

    data() {
      return {
        timer: '',
      };
    },
    mounted() {
      this.timer = setInterval(() => {
          alert();
        }, 5000);
    },
    beforeDestroy() {
      clearInterval(this.timer);
    }

  2)、第二种写法,我们用vue的监听

mounted() {
    var self =this;
    const timer = setInterval(() => {
      alert();
    }, 5000);
    // 通过$once来监听定时器,在beforeDestroy钩子可以被清除。
    this.$once('hook:beforeDestroy', () => {            
        clearInterval(timer);                                    
    });
  }

两种方法都能成功,但是第二种方法写起来比较方便,而且看网上的帖子说第一种有时会失效,可能人品不好吧,推荐第二种。监听看不明白的可以去vue官网再看看

原文地址:https://www.cnblogs.com/liangshibo/p/14084276.html