Vuetify:节流/去抖动 v-autocomplete

Posted

技术标签:

【中文标题】Vuetify:节流/去抖动 v-autocomplete【英文标题】:Vuetify : throttle / debounce v-autocomplete 【发布时间】:2019-11-11 06:20:27 【问题描述】:

我正在对远程数据使用 Vuetify 自动完成功能,并且我想限制/消除 API 调用(当用户在自动完成中键入文本时,等待 500 毫秒以调用 API)。我该怎么做?

我看到了关于 debounce-search 属性的 Stack OverFlow 帖子,但它对我不起作用,而且我没有看到任何关于此属性的 Vuetify 文档。

【问题讨论】:

【参考方案1】:

您可以向进行 API 调用的函数添加去抖动功能。可以使用setTimeoutclearTimeout 实现去抖,这样新的呼叫会被延迟并取消任何待处理的呼叫:

methods: 
  fetchEntriesDebounced() 
    // cancel pending call
    clearTimeout(this._timerId)

    // delay new call 500ms
    this._timerId = setTimeout(() => 
      this.fetch()
    , 500)
  

这样的方法可以绑定到v-autocompletesearch-input 属性上的watcher:

<template>
  <v-autocomplete :search-input.sync="search" />
</template>

<script>
export default 
  data() 
    return 
      search: null
    
  ,
  watch: 
    search (val) 
      if (!val) 
        return
      

      this.fetchEntriesDebounced()
    
  ,
  methods:  /* ... */ 

</script>

demo

【讨论】:

@PierrickMartellière 这似乎与这个问题无关。您可以发布一个新问题,并附上问题重现的链接吗?【参考方案2】:

非常感谢。 有用。 这是我的代码(对地址进行地理编码):

<v-autocomplete
        ref="refCombobox"
        v-model="adresseSelectionnee"
        :items="items"
        :loading="isLoading"
        :search-input.sync="search"
        no-filter
        hide-details
        hide-selected
        item-text="full"
        item-value="address"
        placeholder="Où ?"
        append-icon="search"
        return-object
        dense
        solo
        class="caption"
        clearable
        hide-no-data
      ></v-autocomplete>


watch: 

    search(val) 
      if (!val) 
        return;
      

      this.geocodeGoogle(val);
    
  ,



methods: 
    geocodeGoogle(val) 
      // cancel pending call
      clearTimeout(this._timerId);

      this.isLoading = true;

      // delay new call 500ms
      this._timerId = setTimeout(() => 
        const geocoder = new this.$google.maps.Geocoder();
        geocoder.geocode( address: val, region: "FR" , (results, status) => 
          if (status === "OK") 
            this.adressesGoogle = results;
            this.isLoading = false;
           else                
            this.isLoading = false;
          
        );
      , 500);
    ,

【讨论】:

以上是关于Vuetify:节流/去抖动 v-autocomplete的主要内容,如果未能解决你的问题,请参考以下文章

节流和去抖动功能

如何通过 React Hook 使用节流阀或去抖动?

React - 节流/去抖动微调器(加载消息) - 不显示请求是不是快于 X 毫秒

javascript 节流(不是去抖动)一种方法 - 类似于lodash,但更简单

如何创建类似于 javascript 节流/去抖动功能的 Rails/Ruby 方法

防抖与节流