uso del temporizador vue

1. Escenarios de uso

De acuerdo con la posición del marco de la cara empujado por ws, dibújelo en el lienzo; si el mensaje no se recibe después de 500 ms, limpie el lienzo. Captura de pantalla a continuación:

Dos, el código es el siguiente

/**
* 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;
},

La convocatoria es la siguiente:

  this.listenNoMsg(500, 100);