VueJs keydown事件堆积起来
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VueJs keydown事件堆积起来相关的知识，希望对你有一定的参考价值。
我正在构建一个<textarea>字段，一旦用户在其上键入v-on:keydown就开始淡出，但如果他继续键入淡入淡出重置保持opacity: 1。
但是，行为与预期不同。用户输入的越多，淡入淡出开始发生得越快，忽略定义的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()来重置功能，但它没有用。
答案
要有效地使用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>另一答案
```
!javascript
clearInterval
```应该做的伎俩。你能说明你是如何使用它的吗？
以上是关于VueJs keydown事件堆积起来的主要内容，如果未能解决你的问题，请参考以下文章