如何在vuejs2中“用户停止输入后提交表单”

Question

我有一个搜索模块，其中：当用户停止输入时，它应该搜索 name。

我认为解决方案是做一个timeoutwhen a user keyup. 参考

<input type="text" @keyup="textSearch($event)">

textSearch(e){
    var timer;
    clearTimeout(timer);

    timer = setTimeout(() => {
        alert('searching...');
    }, 2500);
}

代码全部正常工作，问题是为什么当我在 1 秒内输入 3 个字符时，它会弹出 3 个警报？我预计应该会弹出一个窗口，因为它会等待 2.5 秒。

代码有问题吗？需要帮助先生们

Answer 1

如果我正确理解您的问题，那么您每次运行时清除的超时textsearch()不是您上次创建的超时，而是您刚刚使用var timer. 我建议将计时器变量存储在数据属性中，而不是让clearTimeout清除正确的超时。

像这样的东西：

data: {
    timer: undefined
},
methods: {
    textSearch(e){
      clearTimeout(this.timer)

      this.timer = setTimeout(() => {
          alert('searching...')
      }, 2500)
    }
}

通过我的修改来处理您的代码：

https://jsfiddle.net/MapletoneMartin/yjxfsehz/2/

祝你好运！

Answer 2

这是一个解决方案：

setTimeout没问题——或者，你也可以使用debounce Vue-debounce

<input v-debounce:400ms="myFn" type="text" />

<script>
export default {
  methods: {
    myFn(val) {
      console.log(val) // => The value of the input
    }
  }
}
</script>