vue 定时器使用

一、使用场景

根据ws推送人脸画框位置，在canvas上画出来；超过500ms没收到消息，清理画布。截图如下：

二、代码如下

/**
* timeTotal   number   500ms 倒计时
* interval  number   计时器间隔 100ms    每100ms执行一次
*/
listenNoMsg(timeTotal, interval) {
  const TIME_COUNT = timeTotal;
  let count = TIME_COUNT;
  if (this.detectTimer) this.resetDetectTimer(); 
  this.detectTimer = setInterval(() => {
    if (count > 0 && count <= TIME_COUNT) {
      count -= interval;
    } else {
      this.rectCtx.clearRect(0, 0, this.width, this.height);
      this.resetDetectTimer();
    }
  }, interval);
},
 //清理定时器
resetDetectTimer() {
  clearInterval(this.detectTimer);
  this.detectTimer = null;
},

调用如下：

  this.listenNoMsg(500, 100);