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 调用的函数添加去抖动功能。可以使用setTimeout
和clearTimeout
实现去抖,这样新的呼叫会被延迟并取消任何待处理的呼叫:
methods:
fetchEntriesDebounced()
// cancel pending call
clearTimeout(this._timerId)
// delay new call 500ms
this._timerId = setTimeout(() =>
this.fetch()
, 500)
这样的方法可以绑定到v-autocomplete
的search-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 - 节流/去抖动微调器(加载消息) - 不显示请求是不是快于 X 毫秒
javascript 节流(不是去抖动)一种方法 - 类似于lodash,但更简单