1.项目中使用防抖
安装:
npm i --save-dev @types/lodash
使用组件中引入:
import _ from 'lodash'
引入完成后可能会有报错,找到项目中shims-vue.d.ts文件添加就解决报错
declare module "lodash";
防抖
_.debounce(func, [wait=0], [options=]) 函数在延迟几毫秒之后才执行,也就是停止改变几秒后执行
参数:
func (Function): 要防抖动的函数。
[wait=0] (number): 需要延迟的毫秒数。
[options=] (Object): 选项对象。
[options.leading=false] (boolean): 指定在延迟开始前调用。
[options.maxWait] (number): 设置 func 允许被延迟的最大值。
[options.trailing=true] (boolean): 指定在延迟结束后调用。
// 点击触发的函数
const handleLogin = async () => {
console.log("触发了");
let { data: res }: any = await doLogin();
console.log(res);
proxy.userName = res.data.msg;
};
// 按钮请求防抖
const fangdou = _.debounce(handleLogin, 500, {
leading: true, // 延长开始后调用
trailing: false, // 延长结束前调用
});
// 节流
const jieliu = _.throttle(handleLogin, 2000, {
leading: true, // 延长开始后调用
trailing: false, // 延长结束前调用
});