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

Posted 2023-02-16

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

【英文标题】：How to do "submit form after user stop typing" in vuejs2

【发布时间】：2020-04-29 20:41:45

【问题描述】：

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

我认为解决方案是在用户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 秒。

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

【问题讨论】：

npmjs.com/package/vue-debounce

@Hamelraj 谢谢，在这种情况下不需要setTimeout

是的，你可以简单地使用

【参考方案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

【讨论】：

解决方案有效。但我更喜欢标记的答案，谢谢您的回复先生。投了赞成票！

【参考方案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>

【参考方案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/

祝你好运！

【讨论】：

解决方案有效。但我更喜欢标记的答案，感谢您的回复先生。投了赞成票！

【参考方案4】：

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

data () 
    return 
        timer: null
    



textSearch(e)
    clearTimeout(this.timer);

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

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

【讨论】：

解决方案有效。但我更喜欢标记的答案，感谢您的回复先生。投了赞成票！