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

Question

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

我认为解决方案是在用户keyup 时执行timeout。 reference

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

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

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

代码一切正常，问题是为什么我在 1 秒内输入 3 个字符时会弹出 3 个警报？我希望应该有一个弹出窗口，因为它等待 2.5 秒。

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

Answer 1

另一个解决方案是使用watch 而不是event-keyup。您必须先创建model。

<input type="text" v-model="searchTxt">

data(){
    return{
        searchTxt: ''
    }
},

watch: {
    searchTxt: function(val) {
        if (!this.awaitingSearch) {
          setTimeout(() => {
            alert('searching');
            alert(this.searchTxt); //alert value

            this.awaitingSearch = false;
          }, 2500); // 2.5 sec delay
        }
        this.awaitingSearch = true;
    }
}

More information

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>

Answer 3

如果我正确理解您的问题，您每次运行 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 4

我解决这个问题的方法是在 Vue 数据中使用 timer 变量，因为当在计时器函数内部调用的 textSearch 方法被重新分配时。

data () {
    return {
        timer: null
    }
}


textSearch(e){
    clearTimeout(this.timer);

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

我认为这将解决您的问题。