代码之家 › 专栏 › 技术社区 › João Marcelo Martins

VueJs keydown事件叠加

keyboard-events dom-events vuejs2 vue.js javascript

João Marcelo Martins · 技术社区 · 6 年前

我在建一个 <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() 重置功能,但不起作用。

2 回复 | 直到 4 年前

Roy J 6 年前

使用 clearTimeout 实际上,您必须将上一个 setTimeout .

无论如何,您的方法过于面向DOM。您应该调整显示在 v-bind:style . 音量控制器应为连续运行的间隔,按键事件重置变量。

new Vue({
  el: '#app',
  data: {
    op: 1,
    started: false
  },
  methods: {
    startOrReset() {
      if (this.started) {
        this.op = 1;
      } else {
        setInterval(() => {
          this.op -= 0.1;
          if (this.op < 0) {
            this.op = 0;
          }
        }, 1000);
        this.started = true;
      }
    }
  }
});

<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <textarea :style="{opacity: op}" @keydown="startOrReset">
    Type something here before I disappear!
  </textarea>
</div>