我在Vue模板中有一个简单的输入框，我想使用debounce或多或少像这样:
<input type="text" v-model="filterKey" debounce="500">
然而，在Vue 2中debounce属性已被弃用。建议只说:“使用v-on:输入+第三方反弹功能”。
如何正确地实现它?
我尝试使用lodash, v-on:input和v-model来实现它，但我想知道是否有可能没有额外的变量。
在模板:
<input type="text" v-on:input="debounceInput" v-model="searchInput">
在脚本:
data: function () {
return {
searchInput: '',
filterKey: ''
}
},
methods: {
debounceInput: _.debounce(function () {
this.filterKey = this.searchInput;
}, 500)
}
然后在计算道具中使用过滤键。
当前回答
这里有一种方法
.．. <输入v模型= " searchInput " > .．. 设置(){ const searchInput = ref(null) const timeoutID = ref(null) watch(searchInput， (new, old) => { clearTimeout (timeoutID.value) timeoutID。value = setTimeout(() => { //调用搜索函数 }， 500) //毫秒 }) 返回{…} ｝
其他回答
这里有一种方法
.．. <输入v模型= " searchInput " > .．. 设置(){ const searchInput = ref(null) const timeoutID = ref(null) watch(searchInput， (new, old) => { clearTimeout (timeoutID.value) timeoutID。value = setTimeout(() => { //调用搜索函数 }， 500) //毫秒 }) 返回{…} ｝
我也有同样的问题，这里有一个解决方案，没有插件。
因为<input v-model="xxxx">与
<input
v-bind:value="xxxx"
v-on:input="xxxx = $event.target.value"
>
(源)
我想我可以在xxxx = $event.target.value中为xxxx赋值时设置一个debounce函数
像这样
<input
v-bind:value="xxxx"
v-on:input="debounceSearch($event.target.value)"
>
方法:
debounceSearch(val){
if(search_timeout) clearTimeout(search_timeout);
var that=this;
search_timeout = setTimeout(function() {
that.xxxx = val;
}, 400);
},
如果你可以将debounce函数的执行移动到某个类方法中，你可以使用utils-decorators lib中的decorator (npm install——save utils-decorators):
import {debounce} from 'utils-decorators';
class SomeService {
@debounce(500)
getData(params) {
}
}
<template>
<input type="text" v-model="search" @input="debouncedSearch" />
</template>
<script>
import _ from 'lodash';
export default {
data() {
return {
search: '',
};
},
methods: {
search() {
// Perform the search here
console.log(this.search);
},
},
created() {
this.debouncedSearch = _.debounce(this.search, 1000);
},
};
</script>
短版本使用箭头函数，默认延迟值
文件:debounce.js in ex: (import debounce from '../../跑龙套/防反跳”)
export default function (callback, delay=300) {
let timeout = null
return (...args) => {
clearTimeout(timeout)
const context = this
timeout = setTimeout(() => callback.apply(context, args), delay)
}
}
2 Mixin选项
文件:debounceMixin.js
export default {
methods: {
debounce(func, delay=300) {
let debounceTimer;
return function() {
// console.log("debouncing call..");
const context = this;
const args = arguments;
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => func.apply(context, args), delay);
// console.log("..done");
};
}
}
};
在vueComponent中使用:
<script>
import debounceMixin from "../mixins/debounceMixin";
export default {
mixins: [debounceMixin],
data() {
return {
isUserIdValid: false,
};
},
mounted() {
this.isUserIdValid = this.debounce(this.checkUserIdValid, 1000);
},
methods: {
isUserIdValid(id){
// logic
}
}
</script>
另一个选项，例子
Vue搜索输入反弹
