Vue中使用防抖函数,并传参
Vue中使用防抖函数,并传参
·
1、在 utils.js文件夹中封装 防抖 函数
/**
*
* @description 防抖
* @param func 需要频繁调用的方法
* @param delay 间隔时间,表示多长时间没有操作则执行fn方法, delay单位是秒
*
*/
export const debounce = (func, delay) => {
let timer;
return function() {
if (timer)
clearTimeout(timer);
timer = setTimeout(() => {
func.call(this, ...arguments);
}, delay * 1000);
}
}
2、在页面中引入 debounce 函数
import { debounce } from "@/Utils/util";
3、假设在 input 的change事件中需要使用防抖
// 在 onChange 事件中传入两个参数
<Input
v-model="msg"
style="width: 100%"
@on-change="(e) => {onChange(e?.target?.value, item);}">
</Input>
4、使用 debounce 函数
onChange: debounce(function (value, row) {
console.log('value',value);
}),
更多推荐
已为社区贡献1条内容
所有评论(0)