我在建一个 <textarea> 用户键入后开始淡出的字段 v-on:keydown ,但如果他继续键入淡入淡出重置,则保持 opacity: 1 .

然而,行为与预期不同。用户键入的越多,淡出开始的速度越快,忽略 setTimeout 定义,并随着时间的推移恢复正常(例如:如果 <text区域(>); 淡入度也会相应变化;如果有两个字母,则会运行淡出功能两次,第一次以双倍速度运行,第二次以正常速度运行;三个字母,三倍,三倍快一次。

这就是我目前的情况:

<textarea placeholder="Start typying your text here..." v-model="text" v-on:keydown="startFade" ref="textArea" style="opacity: 1"> </textarea>

方法:

methods: {
  fader(element) {

    if (element.style.opacity == 0) {
      this.text = ''
      element.style.opacity = 1
      console.log(element.style.opacity)
    } else {
      element.style.opacity = element.style.opacity - 0.1
      setTimeout(() => {
        console.log(element.style.opacity)
        this.fader(element)
      }, 1000);
    }
  },
  startFade() {
    let element = this.$refs.textArea;
    element.style.opacity = 1;
    setTimeout(() => {
      this.fader(element)
    }, 1000);
  }
}

我如何阻止这些事件堆积起来,只运行一次?

我尝试添加 clearTimeout() 重置功能,但不起作用。