如何在vuejs2中做"submit form after user stop typing"

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)
    }
}

使用我的修改 fiddle 您的代码：

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);
}

我想这会解决你的问题。

如何在vuejs2中做"submit form after user stop typing"

How to do "submit form after user stop typing" in vuejs2

laravel

vue.js

laravel-5

vuejs2

laravel-6