机械网站案例,发布网页,wordpress 上传pdf附件,58网站建设58xiamen项目中遇到了点击按钮重复提交的问题#xff0c;防止重复点击首先是想到的是给点击事件一个定时#xff0c;下次触发的条件是要距离上一次点击的时间大于N秒的之后才能再执行。
// 防重复点击函数
export const preventRepeatPress {lastPressTi1me: 0, // 上次点击时间…项目中遇到了点击按钮重复提交的问题防止重复点击首先是想到的是给点击事件一个定时下次触发的条件是要距离上一次点击的时间大于N秒的之后才能再执行。
// 防重复点击函数
export const preventRepeatPress {lastPressTi1me: 0, // 上次点击时间 repoTime: 2000, // 默认间隔时间2000 onPress(callback: () void, waitTime: number 2000) {let currTime Date.now();if (currTime - this.lastPressTime this.repoTime) {this.lastPressTime currTime;this.repoTime waitTime; callback callback();}},
};在组件上的点击函数onPress中使用preventRepeatPress方法
Button title点击按钮 onPress{() preventRepeatPress.onPress(() fun())} / 在点击的时候可以传入设置间隔时间进行单独控制
() preventRepeatPress.onPress(() onCredit(),5000)第二使用 setTimeout 函数
需要注意的是 timeout 需要放在全局也就是函数外部否则的话每次调用 timeout 都会重新初始化导致防抖函数失去效果。
定义一个名为 debouncePlus 的函数它接受一个函数 func一个等待时间 wait默认为 1000 毫秒和一个 immediate 参数
// 定义一个变量 timeout用于存储定时器的标识变量作用域需要在函数外部
let timeout: string | number | NodeJS.Timeout | null | undefined null;export const debouncePlus (func: { apply: (arg0: any, arg1: IArguments) void; },wait: number | undefined 1000,immediate: any
) {// 变量 result用于存储函数执行的结果let result: any;// 定义一个内部函数 debounced它将作为防抖后的函数被返回let debounced function (this: any) {// 获取当前函数执行的上下文this 指向let context this;// 获取传递给当前函数的参数let args arguments;// 如果定时器已经存在清除之前的定时器if (timeout) clearTimeout(timeout);// 如果 immediate 为真if (immediate) {// 如果 timeout 为 null说明是第一次调用应该立即执行函数let callNow !timeout;// 设置一个新的定时器在等待时间之后将 timeout 置为 nulltimeout setTimeout(function () {timeout null;}, wait);// 如果应该立即执行则调用原始函数并将结果存储在 result 中if (callNow) result func.apply(context, args);}// 如果 immediate 为假else {// 设置一个新的定时器在等待时间之后执行原始函数timeout setTimeout(function () {func.apply(context, args);}, wait);}// 返回函数执行的结果如果是 immediate 模式可能是立即执行的结果否则可能是 nullreturn result;};// 给 debounced 函数添加一个 cancel 方法用于取消正在等待执行的定时器debounced.cancel function () {clearTimeout(timeout);timeout null;};// 返回防抖后的函数return debounced;
};第三使用 hook
/*** 防抖hook* const { run } useDebounceFn(() {setValue(value 1)},{wait: 500,},);*/
import { useEffect, useMemo, useRef } from react;
import { debouncePlus } from ./debounce-plus;const isDev process.env.NODE_ENV development || process.env.NODE_ENV test;
const isFunction (value: unknown): value is (...args: any) any typeof value function;interface DebounceOptions {wait?: number;leading?: boolean;trailing?: boolean;maxWait?: number;
}type noop (...args: any[]) any;function useDebounceFnT extends noop(fn: T, options?: DebounceOptions) {if (isDev) {if (!isFunction(fn)) {console.error(useDebounceFn expected parameter is a function, got ${typeof fn});}}const fnRef useLatest(fn);const wait options?.wait ?? 1000;const debounced useMemo(() debouncePlus((...args: ParametersT): ReturnTypeT {return fnRef.current(...args);},wait,options,),[],);useUnmount(() {debounced.cancel();});return {run: debounced,cancel: debounced.cancel,// flush: debounced.flush,};
}export default useDebounceFn;export const useUnmount (fn: () void) {if (isDev) {if (!isFunction(fn)) {console.error(useUnmount expected parameter is a function, got ${typeof fn});}}const fnRef useLatest(fn);useEffect(() () {fnRef.current();},[],);
};export function useLatestT(value: T) {const ref useRef(value);ref.current value;return ref;
}有好的思路欢迎评论交流
