！JavaScript的

Question

我构建一个<textarea>字段，一旦用户在其上键入v-on:keydown就开始淡出，但如果他继续输入，则会重置fdes并保持opacity: 1。< / p>

但是，行为与预期不同。用户输入的越多，淡入淡出开始发生得越快，忽略定义的setTimeout，并且随着时间的推移恢复正常（例如：如果<textarea>上有一个字母的淡入淡出行为相应地;如果有两个字母，它会两次运行淡出功能，第一次以双倍速度运行，第二次以正常速度运行;三个字母，3次，3次，快一次......）。

这是我到目前为止所做的：

<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()来重置功能，但它没有用。

Answer 1

要有效地使用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>

Answer 2

```

！JavaScript的

clearInterval

``` 应该做的伎俩。你能说明你是如何使用它的吗？

VueJs keydown事件堆积

2 个答案:

！JavaScript的