VueJs和Axios：延迟输入后触发+取消前一个

Posted 2023-02-22

【中文标题】VueJs和Axios：延迟输入后触发+取消前一个

【英文标题】：VueJs and Axios : Trigger after input with a delay + cancel previous

【发布时间】：2019-03-13 04:31:48

【问题描述】：

所以在我的网站上我有一个输入框

<SearchBox v-model="searchTerm"/>

我通过Axios观看和调用网址

watch: 
    searchTerm: function() 
      axios
      .get("https://robotic.buzz/skynet/search/" + searchTerm)
      .then(response => 
        // JSON responses are automatically parsed.
        this.results = response.data;
      )
      .catch(e => 
        this.errors.push(e);
      );
    
  

有没有办法延迟通话并取消之前的通话？因此，如果有人输入内容，当他们暂停 1 秒时，它会调用服务器，并且不会为他们输入的每个字母调用它。

简单的 1 秒延迟仍会使呼叫排队。

【问题讨论】：

你通常会为类似的事情使用去抖动。试试看lodashes debounce函数，你可以download from npm

看起来不错的解决方案你怎么不把它贴出来

另外：***.com/questions/42199956/…

debounce 完美解决了我的问题

【参考方案1】：

您可以使用lazy 修饰符，如下所示：

 <input type="text"  v-model.lazy="searchTerm" />

因此，当您离开文本字段时，您可以查看数据并致电axios

new Vue(

  el: '#app',
  data()
  return
  searchTerm:''
  
  
  ,
  watch: 
    searchTerm: function(val) 
    console.log(".")
      axios
      .get("https://robotic.buzz/skynet/search/" + val)
      .then(response => 
        // JSON responses are automatically parsed.
        console.log(response.data)
      )
      .catch(e => 
        this.errors.push(e);
      );
    
  
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

<!-- Conversations -->

<div id="app">

<input type="text"  v-model.lazy="searchTerm" />

</div>