js 定时器 setTimeout和setInterval 区别

目录

1.基本概念

2. 用法

setTimeout:

setIntervl   

3.  清除定时器

---

1.基本概念

  setTimeout 几秒后只执行一次

  setIntervl     以指定的时候为周期，一直循环执行

2. 用法

setTimeout:

 setTimeout(() => {
        //执行的代码
      }, 500);  /* 500 指0.5秒*/

setIntervl   

setInterval(方法名, 指定时间);

具体用法：

export default {
  data() {
    return {
      batteryName: "",
      glassName: "",
      tyreName: "",
      doorName: "",
      timer: "",
      isShow: true,
    };
  },
  created() {},
  mounted() {
    this.init();
    this.bgcolor();
  },
  watch: {},
  methods: {
    init() {
      //setInterval：定时器 每隔2秒，循环调这个getData方法。
      this.timer = setInterval(this.getData, 2000);
    },
    //获取值
    getData() {
      //调接口
      let res = {
        code: 200,
        data: [
           isOK:{
              this.batteryName: "正常";
              this.glassName : "报废";
              this.tyreName: "正常";
              this.doorName :"正常";
          }

        ],
      };
      
    /*假数据*/
       this.isShow = !this.isShow;
      if (this.isShow) {
        this.batteryName = "正常";
        this.glassName = "报废";
        this.tyreName = "正常";
        this.doorName = "正常";
      } else {
        this.batteryName = "报废";
        this.glassName = "正常";
        this.tyreName = "报废";
        this.doorName = "报废";
      }
    },

  
  
  },
//清除定时器
  beforeDestroy() {
    clearInterval(this.timer);
  },
};

3.  清除定时器

//清除一次性定时器
clearTimeout(timer)

//清除多次执行定时器
clearInterval(timer)

补充：

js定时器setTimeout和setInterval用法及区别，清除定时器的使用_settimeout和setinterval的区别如何清除-CSDN博客