防抖函数如果不是只使用一次,建议封装起来
防抖函数最常用在搜索
第一步
可以在hook文件夹里面或者其它地方, 创建一个js文件,在文件里面写防抖函数
// 这里传入的是:
// fn:需要加上防抖的函数
// delay:延迟的时间
export function debounce(fn, delay) {
let timer = null; // 形成闭包
return function () {
if (timer) {
clearTimeout(timer); // 防抖
}
timer = setTimeout(() => {
fn(); // 执行传入的函数
}, delay);
};
}
第二步
在你想要用防抖函数的vue文件中引入
import { debounce } from "@src/hook/Debounce.js";
第三步
在vue文件中使用
const searchDebounceHandler = debounce(search, 1000); // search是需要加防抖的函数
然后就可以把searchDebounceHandler 这个函数放到事件里面去
如(点击事件)
@click="searchDebounceHandler"