用于全局防抖

适用场景

• label attribute-onClik
• addEventListener
• vue

适用方法

vue

// main.ts

import { createApp } from "vue";
import "./style.css";

import { debounceClick } from "@/ts/index";

import App from "./App.vue";

debounceClick({ immediate: false, wait: 10000 });

createApp(App).mount("#app");

方法与参数

防抖

参数

/**
 * 定义防抖参数类型。
 * @typedef {Object} DebounceParams
 * @property {number} [wait=0] - 等待时间，单位为毫秒。
 * @property {boolean} [immediate=false] - 是否立即执行回调。
 * @property {string[]} [exclude] - 排除的类名列表。
 * @property {string[]} [include] - 包含的类名列表。
 * @property {(...args: any[]) => void} [callback] - 回调函数。
 */
export type DebounceParams = {
  wait?: number;
  immediate?: boolean;
  exclude?: string[];
  include?: string[];
  callback?: (...args: any[]) => void;
};

immediate

• type : boolean
• default : true
• 防抖是否立即执行

例如：

debounceClick({ immediate: false, wait: 10000 });

表示代码将会在最后一次点击后 10s 后执行事件处理函数

debounceClick({ immediate: true, wait: 10000 });

表示代码将会在第一次点击后，立即执行事件处理函数，并且至少 10s 后才会重新触发事件处理函数，如果 10s 内有点击行为则顺延 10s

wait

• type : number
• default : 1000
• 事件执行间隔时间

exclude

• type : string[]
• default : null
• 排除的标签类名

例如：

 debounceClick({ immediate: false, wait: 1000, exclude: ["exclude-d"] });

表示代码不会拦截类名为 exlude-d 的标签与其子元素

include

• type : string[]
• default : null
• 包含的标签类名

例如：

 debounceClick({ immediate: false, wait: 1000, include: ["exclude-d"] });

表示代码只会拦截类名为 exlude-d 的标签与其子元素

throttleClick

节流

参数

export type ThrottleParams = {
    wait?: number;
    immediate?: boolean;
    exclude?: string[];
    include?: string[];
};

用法同 debounceClick