@tiny-codes/react-easy 1.4.16 → 1.4.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +10 -0
- package/es/hooks/useDebounce.d.ts +37 -9
- package/es/hooks/useDebounce.js +25 -5
- package/es/hooks/useDebounce.js.map +1 -1
- package/lib/hooks/useDebounce.d.ts +37 -9
- package/lib/hooks/useDebounce.js +46 -21
- package/lib/hooks/useDebounce.js.map +3 -3
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,27 +1,27 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export interface UseDebounceOptions {
|
|
3
3
|
/**
|
|
4
|
-
* - **EN
|
|
5
|
-
* - **CN
|
|
4
|
+
* - **EN:** Whether to execute at the start of the wait period. Default is `false`.
|
|
5
|
+
* - **CN:** 是否在等待周期开始时执行，默认值为 `false`
|
|
6
6
|
*/
|
|
7
7
|
leading?: boolean;
|
|
8
8
|
/**
|
|
9
|
-
* - **EN
|
|
10
|
-
* - **CN
|
|
9
|
+
* - **EN:** Regular debounce interval in milliseconds. Default is `0`, meaning no debounce.
|
|
10
|
+
* - **CN:** 常规防抖间隔 (ms)，默认值为 `0`, 表示不进行防抖
|
|
11
11
|
*/
|
|
12
12
|
wait?: number;
|
|
13
13
|
/**
|
|
14
|
-
* - **EN
|
|
15
|
-
* - **CN
|
|
14
|
+
* - **EN:** Maximum wait time in milliseconds. Default is `0`, meaning no maximum wait.
|
|
15
|
+
* - **CN:** 最大等待时间 (ms)，默认值为 `0`, 表示不限制最大等待时间
|
|
16
16
|
*/
|
|
17
17
|
maxWait?: number;
|
|
18
18
|
}
|
|
19
19
|
/**
|
|
20
|
-
* - **EN
|
|
20
|
+
* - **EN:** Debounce Hook with dual trigger mechanisms:
|
|
21
21
|
*
|
|
22
22
|
* 1. Traditional debounce: Executes after a specified interval without new calls.
|
|
23
23
|
* 2. Max wait: Forces execution after exceeding a specified maximum wait time.
|
|
24
|
-
* - **CN
|
|
24
|
+
* - **CN:** 防抖 Hook：具有两种触发机制:
|
|
25
25
|
*
|
|
26
26
|
* 1. 传统防抖：等待指定时间内无新调用后执行
|
|
27
27
|
* 2. 最大等待：超过指定最大等待时间后强制执行
|
|
@@ -33,5 +33,33 @@ export interface UseDebounceOptions {
|
|
|
33
33
|
*
|
|
34
34
|
* @returns The debounced function | 防抖处理后的函数
|
|
35
35
|
*/
|
|
36
|
-
declare function useDebounce<T extends (...args: any[]) => unknown>(fn: T, deps: React.DependencyList, options?: UseDebounceOptions):
|
|
36
|
+
declare function useDebounce<T extends (...args: any[]) => unknown>(fn: T, deps: React.DependencyList, options?: UseDebounceOptions): DebouncedFunc<T>;
|
|
37
|
+
export interface DebouncedFunc<T extends (...args: any[]) => unknown> {
|
|
38
|
+
/**
|
|
39
|
+
* - **EN:** The debounced function.
|
|
40
|
+
* - **CN:** 防抖处理后的函数
|
|
41
|
+
*/
|
|
42
|
+
(...args: Parameters<T>): ReturnType<T>;
|
|
43
|
+
/**
|
|
44
|
+
* - **EN:** Cancel any pending execution of the debounced function.
|
|
45
|
+
* - **CN:** 取消防抖函数的任何待执行操作
|
|
46
|
+
*/
|
|
47
|
+
cancel: () => void;
|
|
48
|
+
/**
|
|
49
|
+
* - **EN:** Disable the debounce functionality. Once disabled, subsequent calls to the function
|
|
50
|
+
* will have no effect until re-enabled.
|
|
51
|
+
* - **CN:** 禁用此防抖函数，一旦被禁用，再次调用改函数将不会有任何效果，除非重新启用
|
|
52
|
+
*/
|
|
53
|
+
disable: () => void;
|
|
54
|
+
/**
|
|
55
|
+
* - **EN:** Re-enable the debounce functionality after it has been disabled.
|
|
56
|
+
* - **CN:** 重新启用此防抖函数
|
|
57
|
+
*/
|
|
58
|
+
enable: () => void;
|
|
59
|
+
/**
|
|
60
|
+
* - **EN:** Check if the debounce functionality is currently disabled.
|
|
61
|
+
* - **CN:** 检查此防抖函数当前是否被禁用
|
|
62
|
+
*/
|
|
63
|
+
isDisabled(): boolean;
|
|
64
|
+
}
|
|
37
65
|
export default useDebounce;
|
package/es/hooks/useDebounce.js
CHANGED
|
@@ -5,12 +5,13 @@ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symb
|
|
|
5
5
|
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
6
6
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
7
7
|
import { useCallback, useEffect, useRef } from 'react';
|
|
8
|
+
import useRefFunction from "./useRefFunction";
|
|
8
9
|
/**
|
|
9
|
-
* - **EN
|
|
10
|
+
* - **EN:** Debounce Hook with dual trigger mechanisms:
|
|
10
11
|
*
|
|
11
12
|
* 1. Traditional debounce: Executes after a specified interval without new calls.
|
|
12
13
|
* 2. Max wait: Forces execution after exceeding a specified maximum wait time.
|
|
13
|
-
* - **CN
|
|
14
|
+
* - **CN:** 防抖 Hook：具有两种触发机制:
|
|
14
15
|
*
|
|
15
16
|
* 1. 传统防抖：等待指定时间内无新调用后执行
|
|
16
17
|
* 2. 最大等待：超过指定最大等待时间后强制执行
|
|
@@ -34,6 +35,7 @@ function useDebounce(fn, deps) {
|
|
|
34
35
|
var fnRef = useRef(fn);
|
|
35
36
|
var lastExecutedTimeRef = useRef(0); // The last execution timestamp
|
|
36
37
|
var lastArgsRef = useRef([]); // The last call arguments
|
|
38
|
+
var isDisabledRef = useRef(false); // Whether debounce is disabled
|
|
37
39
|
|
|
38
40
|
// Update the latest function reference
|
|
39
41
|
useEffect(function () {
|
|
@@ -58,7 +60,10 @@ function useDebounce(fn, deps) {
|
|
|
58
60
|
}, []);
|
|
59
61
|
|
|
60
62
|
// The debounced function
|
|
61
|
-
|
|
63
|
+
var debouncedFunction = useRefFunction(function () {
|
|
64
|
+
if (isDisabledRef.current) {
|
|
65
|
+
return;
|
|
66
|
+
}
|
|
62
67
|
var now = Date.now();
|
|
63
68
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
64
69
|
args[_key] = arguments[_key];
|
|
@@ -85,8 +90,23 @@ function useDebounce(fn, deps) {
|
|
|
85
90
|
|
|
86
91
|
// 3. Set a new debounce timer
|
|
87
92
|
timeoutRef.current = setTimeout(executeFunction, wait);
|
|
88
|
-
}
|
|
89
|
-
|
|
93
|
+
});
|
|
94
|
+
debouncedFunction.cancel = function () {
|
|
95
|
+
if (timeoutRef.current) {
|
|
96
|
+
clearTimeout(timeoutRef.current);
|
|
97
|
+
timeoutRef.current = null;
|
|
98
|
+
}
|
|
99
|
+
};
|
|
100
|
+
debouncedFunction.disable = function () {
|
|
101
|
+
isDisabledRef.current = true;
|
|
102
|
+
};
|
|
103
|
+
debouncedFunction.enable = function () {
|
|
104
|
+
isDisabledRef.current = false;
|
|
105
|
+
};
|
|
106
|
+
debouncedFunction.isDisabled = function () {
|
|
107
|
+
return isDisabledRef.current;
|
|
108
|
+
};
|
|
109
|
+
return debouncedFunction;
|
|
90
110
|
}
|
|
91
111
|
export default useDebounce;
|
|
92
112
|
//# sourceMappingURL=useDebounce.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useCallback","useEffect","useRef","useDebounce","fn","deps","options","arguments","length","undefined","_options$wait","wait","_options$maxWait","maxWait","_options$leading","leading","timeoutRef","fnRef","lastExecutedTimeRef","lastArgsRef","current","clearTimeout","executeFunction","Date","now","apply","_toConsumableArray","_len","args","Array","_key","setTimeout","
|
|
1
|
+
{"version":3,"names":["useCallback","useEffect","useRef","useRefFunction","useDebounce","fn","deps","options","arguments","length","undefined","_options$wait","wait","_options$maxWait","maxWait","_options$leading","leading","timeoutRef","fnRef","lastExecutedTimeRef","lastArgsRef","isDisabledRef","current","clearTimeout","executeFunction","Date","now","apply","_toConsumableArray","debouncedFunction","_len","args","Array","_key","setTimeout","cancel","disable","enable","isDisabled"],"sources":["../../src/hooks/useDebounce.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport useRefFunction from './useRefFunction';\n\nexport interface UseDebounceOptions {\n /**\n * - **EN:** Whether to execute at the start of the wait period. Default is `false`.\n * - **CN:** 是否在等待周期开始时执行，默认值为 `false`\n */\n leading?: boolean;\n /**\n * - **EN:** Regular debounce interval in milliseconds. Default is `0`, meaning no debounce.\n * - **CN:** 常规防抖间隔 (ms)，默认值为 `0`, 表示不进行防抖\n */\n wait?: number;\n /**\n * - **EN:** Maximum wait time in milliseconds. Default is `0`, meaning no maximum wait.\n * - **CN:** 最大等待时间 (ms)，默认值为 `0`, 表示不限制最大等待时间\n */\n maxWait?: number;\n}\n/**\n * - **EN:** Debounce Hook with dual trigger mechanisms:\n *\n * 1. Traditional debounce: Executes after a specified interval without new calls.\n * 2. Max wait: Forces execution after exceeding a specified maximum wait time.\n * - **CN:** 防抖 Hook：具有两种触发机制:\n *\n * 1. 传统防抖：等待指定时间内无新调用后执行\n * 2. 最大等待：超过指定最大等待时间后强制执行\n *\n * @param fn The function to debounce | 需要防抖的函数\n * @param deps Dependency array, re-creates the debounced function when dependencies change |\n * 依赖项数组，当依赖变化时重新创建防抖函数\n * @param options Configuration options | 配置选项\n *\n * @returns The debounced function | 防抖处理后的函数\n */\nfunction useDebounce<T extends (...args: any[]) => unknown>(\n fn: T,\n deps: React.DependencyList,\n options: UseDebounceOptions = {}\n): DebouncedFunc<T> {\n const { wait = 0, maxWait = 0, leading = false } = options;\n const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n const fnRef = useRef<T>(fn);\n const lastExecutedTimeRef = useRef<number>(0); // The last execution timestamp\n const lastArgsRef = useRef<unknown[]>([]); // The last call arguments\n const isDisabledRef = useRef<boolean>(false); // Whether debounce is disabled\n\n // Update the latest function reference\n useEffect(() => {\n fnRef.current = fn;\n }, [fn]);\n\n // Cleanup on unmount\n useEffect(() => {\n return () => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n timeoutRef.current = null;\n }\n };\n }, []);\n\n // The actual execution function\n const executeFunction = useCallback(() => {\n timeoutRef.current = null;\n lastExecutedTimeRef.current = Date.now();\n fnRef.current(...lastArgsRef.current);\n }, []);\n\n // The debounced function\n const debouncedFunction = useRefFunction((...args: Parameters<T>) => {\n if (isDisabledRef.current) {\n return;\n }\n const now = Date.now();\n lastArgsRef.current = args;\n\n // If leading is true and it's the first call, execute immediately\n if (leading && timeoutRef.current === null && now - lastExecutedTimeRef.current >= wait) {\n executeFunction();\n return;\n }\n\n // 1. Clear the existing timer\n if (timeoutRef.current !== null) {\n clearTimeout(timeoutRef.current);\n timeoutRef.current = null;\n }\n\n // 2. Check if the maximum wait time has been exceeded, if so, execute immediately\n if (maxWait > 0 && now - lastExecutedTimeRef.current >= maxWait) {\n executeFunction();\n return;\n }\n\n // 3. Set a new debounce timer\n timeoutRef.current = setTimeout(executeFunction, wait);\n }) as DebouncedFunc<T>;\n debouncedFunction.cancel = () => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n timeoutRef.current = null;\n }\n };\n debouncedFunction.disable = () => {\n isDisabledRef.current = true;\n };\n debouncedFunction.enable = () => {\n isDisabledRef.current = false;\n };\n debouncedFunction.isDisabled = () => isDisabledRef.current;\n return debouncedFunction;\n}\n\nexport interface DebouncedFunc<T extends (...args: any[]) => unknown> {\n /**\n * - **EN:** The debounced function.\n * - **CN:** 防抖处理后的函数\n */\n (...args: Parameters<T>): ReturnType<T>;\n /**\n * - **EN:** Cancel any pending execution of the debounced function.\n * - **CN:** 取消防抖函数的任何待执行操作\n */\n cancel: () => void;\n /**\n * - **EN:** Disable the debounce functionality. Once disabled, subsequent calls to the function\n * will have no effect until re-enabled.\n * - **CN:** 禁用此防抖函数，一旦被禁用，再次调用改函数将不会有任何效果，除非重新启用\n */\n disable: () => void;\n /**\n * - **EN:** Re-enable the debounce functionality after it has been disabled.\n * - **CN:** 重新启用此防抖函数\n */\n enable: () => void;\n /**\n * - **EN:** Check if the debounce functionality is currently disabled.\n * - **CN:** 检查此防抖函数当前是否被禁用\n */\n isDisabled(): boolean;\n}\n\nexport default useDebounce;\n"],"mappings":"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"}
|
|
@@ -1,27 +1,27 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export interface UseDebounceOptions {
|
|
3
3
|
/**
|
|
4
|
-
* - **EN
|
|
5
|
-
* - **CN
|
|
4
|
+
* - **EN:** Whether to execute at the start of the wait period. Default is `false`.
|
|
5
|
+
* - **CN:** 是否在等待周期开始时执行，默认值为 `false`
|
|
6
6
|
*/
|
|
7
7
|
leading?: boolean;
|
|
8
8
|
/**
|
|
9
|
-
* - **EN
|
|
10
|
-
* - **CN
|
|
9
|
+
* - **EN:** Regular debounce interval in milliseconds. Default is `0`, meaning no debounce.
|
|
10
|
+
* - **CN:** 常规防抖间隔 (ms)，默认值为 `0`, 表示不进行防抖
|
|
11
11
|
*/
|
|
12
12
|
wait?: number;
|
|
13
13
|
/**
|
|
14
|
-
* - **EN
|
|
15
|
-
* - **CN
|
|
14
|
+
* - **EN:** Maximum wait time in milliseconds. Default is `0`, meaning no maximum wait.
|
|
15
|
+
* - **CN:** 最大等待时间 (ms)，默认值为 `0`, 表示不限制最大等待时间
|
|
16
16
|
*/
|
|
17
17
|
maxWait?: number;
|
|
18
18
|
}
|
|
19
19
|
/**
|
|
20
|
-
* - **EN
|
|
20
|
+
* - **EN:** Debounce Hook with dual trigger mechanisms:
|
|
21
21
|
*
|
|
22
22
|
* 1. Traditional debounce: Executes after a specified interval without new calls.
|
|
23
23
|
* 2. Max wait: Forces execution after exceeding a specified maximum wait time.
|
|
24
|
-
* - **CN
|
|
24
|
+
* - **CN:** 防抖 Hook：具有两种触发机制:
|
|
25
25
|
*
|
|
26
26
|
* 1. 传统防抖：等待指定时间内无新调用后执行
|
|
27
27
|
* 2. 最大等待：超过指定最大等待时间后强制执行
|
|
@@ -33,5 +33,33 @@ export interface UseDebounceOptions {
|
|
|
33
33
|
*
|
|
34
34
|
* @returns The debounced function | 防抖处理后的函数
|
|
35
35
|
*/
|
|
36
|
-
declare function useDebounce<T extends (...args: any[]) => unknown>(fn: T, deps: React.DependencyList, options?: UseDebounceOptions):
|
|
36
|
+
declare function useDebounce<T extends (...args: any[]) => unknown>(fn: T, deps: React.DependencyList, options?: UseDebounceOptions): DebouncedFunc<T>;
|
|
37
|
+
export interface DebouncedFunc<T extends (...args: any[]) => unknown> {
|
|
38
|
+
/**
|
|
39
|
+
* - **EN:** The debounced function.
|
|
40
|
+
* - **CN:** 防抖处理后的函数
|
|
41
|
+
*/
|
|
42
|
+
(...args: Parameters<T>): ReturnType<T>;
|
|
43
|
+
/**
|
|
44
|
+
* - **EN:** Cancel any pending execution of the debounced function.
|
|
45
|
+
* - **CN:** 取消防抖函数的任何待执行操作
|
|
46
|
+
*/
|
|
47
|
+
cancel: () => void;
|
|
48
|
+
/**
|
|
49
|
+
* - **EN:** Disable the debounce functionality. Once disabled, subsequent calls to the function
|
|
50
|
+
* will have no effect until re-enabled.
|
|
51
|
+
* - **CN:** 禁用此防抖函数，一旦被禁用，再次调用改函数将不会有任何效果，除非重新启用
|
|
52
|
+
*/
|
|
53
|
+
disable: () => void;
|
|
54
|
+
/**
|
|
55
|
+
* - **EN:** Re-enable the debounce functionality after it has been disabled.
|
|
56
|
+
* - **CN:** 重新启用此防抖函数
|
|
57
|
+
*/
|
|
58
|
+
enable: () => void;
|
|
59
|
+
/**
|
|
60
|
+
* - **EN:** Check if the debounce functionality is currently disabled.
|
|
61
|
+
* - **CN:** 检查此防抖函数当前是否被禁用
|
|
62
|
+
*/
|
|
63
|
+
isDisabled(): boolean;
|
|
64
|
+
}
|
|
37
65
|
export default useDebounce;
|
package/lib/hooks/useDebounce.js
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
1
2
|
var __defProp = Object.defineProperty;
|
|
2
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
4
6
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
7
|
var __export = (target, all) => {
|
|
6
8
|
for (var name in all)
|
|
@@ -14,6 +16,14 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
14
16
|
}
|
|
15
17
|
return to;
|
|
16
18
|
};
|
|
19
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
21
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
22
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
23
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
24
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
25
|
+
mod
|
|
26
|
+
));
|
|
17
27
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
28
|
|
|
19
29
|
// src/hooks/useDebounce.ts
|
|
@@ -23,12 +33,14 @@ __export(useDebounce_exports, {
|
|
|
23
33
|
});
|
|
24
34
|
module.exports = __toCommonJS(useDebounce_exports);
|
|
25
35
|
var import_react = require("react");
|
|
36
|
+
var import_useRefFunction = __toESM(require("./useRefFunction"));
|
|
26
37
|
function useDebounce(fn, deps, options = {}) {
|
|
27
38
|
const { wait = 0, maxWait = 0, leading = false } = options;
|
|
28
39
|
const timeoutRef = (0, import_react.useRef)(null);
|
|
29
40
|
const fnRef = (0, import_react.useRef)(fn);
|
|
30
41
|
const lastExecutedTimeRef = (0, import_react.useRef)(0);
|
|
31
42
|
const lastArgsRef = (0, import_react.useRef)([]);
|
|
43
|
+
const isDisabledRef = (0, import_react.useRef)(false);
|
|
32
44
|
(0, import_react.useEffect)(() => {
|
|
33
45
|
fnRef.current = fn;
|
|
34
46
|
}, [fn]);
|
|
@@ -45,27 +57,40 @@ function useDebounce(fn, deps, options = {}) {
|
|
|
45
57
|
lastExecutedTimeRef.current = Date.now();
|
|
46
58
|
fnRef.current(...lastArgsRef.current);
|
|
47
59
|
}, []);
|
|
48
|
-
|
|
49
|
-
(
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
)
|
|
60
|
+
const debouncedFunction = (0, import_useRefFunction.default)((...args) => {
|
|
61
|
+
if (isDisabledRef.current) {
|
|
62
|
+
return;
|
|
63
|
+
}
|
|
64
|
+
const now = Date.now();
|
|
65
|
+
lastArgsRef.current = args;
|
|
66
|
+
if (leading && timeoutRef.current === null && now - lastExecutedTimeRef.current >= wait) {
|
|
67
|
+
executeFunction();
|
|
68
|
+
return;
|
|
69
|
+
}
|
|
70
|
+
if (timeoutRef.current !== null) {
|
|
71
|
+
clearTimeout(timeoutRef.current);
|
|
72
|
+
timeoutRef.current = null;
|
|
73
|
+
}
|
|
74
|
+
if (maxWait > 0 && now - lastExecutedTimeRef.current >= maxWait) {
|
|
75
|
+
executeFunction();
|
|
76
|
+
return;
|
|
77
|
+
}
|
|
78
|
+
timeoutRef.current = setTimeout(executeFunction, wait);
|
|
79
|
+
});
|
|
80
|
+
debouncedFunction.cancel = () => {
|
|
81
|
+
if (timeoutRef.current) {
|
|
82
|
+
clearTimeout(timeoutRef.current);
|
|
83
|
+
timeoutRef.current = null;
|
|
84
|
+
}
|
|
85
|
+
};
|
|
86
|
+
debouncedFunction.disable = () => {
|
|
87
|
+
isDisabledRef.current = true;
|
|
88
|
+
};
|
|
89
|
+
debouncedFunction.enable = () => {
|
|
90
|
+
isDisabledRef.current = false;
|
|
91
|
+
};
|
|
92
|
+
debouncedFunction.isDisabled = () => isDisabledRef.current;
|
|
93
|
+
return debouncedFunction;
|
|
69
94
|
}
|
|
70
95
|
var useDebounce_default = useDebounce;
|
|
71
96
|
//# sourceMappingURL=useDebounce.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/hooks/useDebounce.ts"],
|
|
4
|
-
"sourcesContent": ["import { useCallback, useEffect, useRef } from 'react';\n\nexport interface UseDebounceOptions {\n /**\n * - **EN
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": []
|
|
4
|
+
"sourcesContent": ["import { useCallback, useEffect, useRef } from 'react';\nimport useRefFunction from './useRefFunction';\n\nexport interface UseDebounceOptions {\n /**\n * - **EN:** Whether to execute at the start of the wait period. Default is `false`.\n * - **CN:** 是否在等待周期开始时执行，默认值为 `false`\n */\n leading?: boolean;\n /**\n * - **EN:** Regular debounce interval in milliseconds. Default is `0`, meaning no debounce.\n * - **CN:** 常规防抖间隔 (ms)，默认值为 `0`, 表示不进行防抖\n */\n wait?: number;\n /**\n * - **EN:** Maximum wait time in milliseconds. Default is `0`, meaning no maximum wait.\n * - **CN:** 最大等待时间 (ms)，默认值为 `0`, 表示不限制最大等待时间\n */\n maxWait?: number;\n}\n/**\n * - **EN:** Debounce Hook with dual trigger mechanisms:\n *\n * 1. Traditional debounce: Executes after a specified interval without new calls.\n * 2. Max wait: Forces execution after exceeding a specified maximum wait time.\n * - **CN:** 防抖 Hook：具有两种触发机制:\n *\n * 1. 传统防抖：等待指定时间内无新调用后执行\n * 2. 最大等待：超过指定最大等待时间后强制执行\n *\n * @param fn The function to debounce | 需要防抖的函数\n * @param deps Dependency array, re-creates the debounced function when dependencies change |\n * 依赖项数组，当依赖变化时重新创建防抖函数\n * @param options Configuration options | 配置选项\n *\n * @returns The debounced function | 防抖处理后的函数\n */\nfunction useDebounce<T extends (...args: any[]) => unknown>(\n fn: T,\n deps: React.DependencyList,\n options: UseDebounceOptions = {}\n): DebouncedFunc<T> {\n const { wait = 0, maxWait = 0, leading = false } = options;\n const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n const fnRef = useRef<T>(fn);\n const lastExecutedTimeRef = useRef<number>(0); // The last execution timestamp\n const lastArgsRef = useRef<unknown[]>([]); // The last call arguments\n const isDisabledRef = useRef<boolean>(false); // Whether debounce is disabled\n\n // Update the latest function reference\n useEffect(() => {\n fnRef.current = fn;\n }, [fn]);\n\n // Cleanup on unmount\n useEffect(() => {\n return () => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n timeoutRef.current = null;\n }\n };\n }, []);\n\n // The actual execution function\n const executeFunction = useCallback(() => {\n timeoutRef.current = null;\n lastExecutedTimeRef.current = Date.now();\n fnRef.current(...lastArgsRef.current);\n }, []);\n\n // The debounced function\n const debouncedFunction = useRefFunction((...args: Parameters<T>) => {\n if (isDisabledRef.current) {\n return;\n }\n const now = Date.now();\n lastArgsRef.current = args;\n\n // If leading is true and it's the first call, execute immediately\n if (leading && timeoutRef.current === null && now - lastExecutedTimeRef.current >= wait) {\n executeFunction();\n return;\n }\n\n // 1. Clear the existing timer\n if (timeoutRef.current !== null) {\n clearTimeout(timeoutRef.current);\n timeoutRef.current = null;\n }\n\n // 2. Check if the maximum wait time has been exceeded, if so, execute immediately\n if (maxWait > 0 && now - lastExecutedTimeRef.current >= maxWait) {\n executeFunction();\n return;\n }\n\n // 3. Set a new debounce timer\n timeoutRef.current = setTimeout(executeFunction, wait);\n }) as DebouncedFunc<T>;\n debouncedFunction.cancel = () => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n timeoutRef.current = null;\n }\n };\n debouncedFunction.disable = () => {\n isDisabledRef.current = true;\n };\n debouncedFunction.enable = () => {\n isDisabledRef.current = false;\n };\n debouncedFunction.isDisabled = () => isDisabledRef.current;\n return debouncedFunction;\n}\n\nexport interface DebouncedFunc<T extends (...args: any[]) => unknown> {\n /**\n * - **EN:** The debounced function.\n * - **CN:** 防抖处理后的函数\n */\n (...args: Parameters<T>): ReturnType<T>;\n /**\n * - **EN:** Cancel any pending execution of the debounced function.\n * - **CN:** 取消防抖函数的任何待执行操作\n */\n cancel: () => void;\n /**\n * - **EN:** Disable the debounce functionality. Once disabled, subsequent calls to the function\n * will have no effect until re-enabled.\n * - **CN:** 禁用此防抖函数，一旦被禁用，再次调用改函数将不会有任何效果，除非重新启用\n */\n disable: () => void;\n /**\n * - **EN:** Re-enable the debounce functionality after it has been disabled.\n * - **CN:** 重新启用此防抖函数\n */\n enable: () => void;\n /**\n * - **EN:** Check if the debounce functionality is currently disabled.\n * - **CN:** 检查此防抖函数当前是否被禁用\n */\n isDisabled(): boolean;\n}\n\nexport default useDebounce;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA+C;AAC/C,4BAA2B;AAoC3B,SAAS,YACP,IACA,MACA,UAA8B,CAAC,GACb;AAClB,QAAM,EAAE,OAAO,GAAG,UAAU,GAAG,UAAU,MAAM,IAAI;AACnD,QAAM,iBAAa,qBAA6C,IAAI;AACpE,QAAM,YAAQ,qBAAU,EAAE;AAC1B,QAAM,0BAAsB,qBAAe,CAAC;AAC5C,QAAM,kBAAc,qBAAkB,CAAC,CAAC;AACxC,QAAM,oBAAgB,qBAAgB,KAAK;AAG3C,8BAAU,MAAM;AACd,UAAM,UAAU;AAAA,EAClB,GAAG,CAAC,EAAE,CAAC;AAGP,8BAAU,MAAM;AACd,WAAO,MAAM;AACX,UAAI,WAAW,SAAS;AACtB,qBAAa,WAAW,OAAO;AAC/B,mBAAW,UAAU;AAAA,MACvB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAGL,QAAM,sBAAkB,0BAAY,MAAM;AACxC,eAAW,UAAU;AACrB,wBAAoB,UAAU,KAAK,IAAI;AACvC,UAAM,QAAQ,GAAG,YAAY,OAAO;AAAA,EACtC,GAAG,CAAC,CAAC;AAGL,QAAM,wBAAoB,sBAAAA,SAAe,IAAI,SAAwB;AACnE,QAAI,cAAc,SAAS;AACzB;AAAA,IACF;AACA,UAAM,MAAM,KAAK,IAAI;AACrB,gBAAY,UAAU;AAGtB,QAAI,WAAW,WAAW,YAAY,QAAQ,MAAM,oBAAoB,WAAW,MAAM;AACvF,sBAAgB;AAChB;AAAA,IACF;AAGA,QAAI,WAAW,YAAY,MAAM;AAC/B,mBAAa,WAAW,OAAO;AAC/B,iBAAW,UAAU;AAAA,IACvB;AAGA,QAAI,UAAU,KAAK,MAAM,oBAAoB,WAAW,SAAS;AAC/D,sBAAgB;AAChB;AAAA,IACF;AAGA,eAAW,UAAU,WAAW,iBAAiB,IAAI;AAAA,EACvD,CAAC;AACD,oBAAkB,SAAS,MAAM;AAC/B,QAAI,WAAW,SAAS;AACtB,mBAAa,WAAW,OAAO;AAC/B,iBAAW,UAAU;AAAA,IACvB;AAAA,EACF;AACA,oBAAkB,UAAU,MAAM;AAChC,kBAAc,UAAU;AAAA,EAC1B;AACA,oBAAkB,SAAS,MAAM;AAC/B,kBAAc,UAAU;AAAA,EAC1B;AACA,oBAAkB,aAAa,MAAM,cAAc;AACnD,SAAO;AACT;AA+BA,IAAO,sBAAQ;",
|
|
6
|
+
"names": ["useRefFunction"]
|
|
7
7
|
}
|