vueタイマーの使用

1. 利用シーン

ws でプッシュした顔枠の位置に応じてキャンバス上に描画し、500ms 経過してもメッセージを受信しない場合はキャンバスをクリーンアップします。以下のスクリーンショット:

2、コードは次のとおりです

/**
* 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);