vite-uni-dev-tool 1.0.0 → 1.1.0
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/README.md +46 -0
- package/dist/const.cjs +1 -1
- package/dist/const.d.ts +12 -0
- package/dist/const.d.ts.map +1 -1
- package/dist/const.js +1 -1
- package/dist/core-shared.d.ts +1 -1
- package/dist/core-shared.d.ts.map +1 -1
- package/dist/core-shared.js +1 -1
- package/dist/core.d.ts +10 -3
- package/dist/core.d.ts.map +1 -1
- package/dist/core.js +2 -2
- package/dist/i18n/locales/en.cjs +1 -1
- package/dist/i18n/locales/en.d.ts +81 -0
- package/dist/i18n/locales/en.d.ts.map +1 -1
- package/dist/i18n/locales/en.js +1 -1
- package/dist/i18n/locales/zh-Hans.cjs +1 -1
- package/dist/i18n/locales/zh-Hans.d.ts +82 -1
- package/dist/i18n/locales/zh-Hans.d.ts.map +1 -1
- package/dist/i18n/locales/zh-Hans.js +1 -1
- package/dist/modules/devConsole/index.cjs +1 -1
- package/dist/modules/devConsole/index.js +3 -3
- package/dist/modules/devEvent/index.cjs +3 -3
- package/dist/modules/devEvent/index.d.ts +1 -0
- package/dist/modules/devEvent/index.d.ts.map +1 -1
- package/dist/modules/devEvent/index.js +3 -3
- package/dist/modules/devIntercept/index.cjs +14 -13
- package/dist/modules/devIntercept/index.d.ts +19 -0
- package/dist/modules/devIntercept/index.d.ts.map +1 -1
- package/dist/modules/devIntercept/index.js +14 -13
- package/dist/modules/devStore/index.cjs +1 -1
- package/dist/modules/devStore/index.d.ts +21 -0
- package/dist/modules/devStore/index.d.ts.map +1 -1
- package/dist/modules/devStore/index.js +1 -1
- package/dist/plugins/uniDevTool/transform/transformMain.cjs +1 -1
- package/dist/plugins/uniDevTool/transform/transformMain.js +1 -1
- package/dist/type.d.ts +47 -2
- package/dist/type.d.ts.map +1 -1
- package/dist/utils/language.cjs +1 -1
- package/dist/utils/language.d.ts.map +1 -1
- package/dist/utils/language.js +1 -1
- package/dist/utils/object.cjs +1 -1
- package/dist/utils/object.d.ts.map +1 -1
- package/dist/utils/object.js +1 -1
- package/dist/v3/DevTool/components/BluetoothList/BluetoothItem.vue +199 -0
- package/dist/v3/DevTool/components/BluetoothList/BluetoothTool.vue +730 -0
- package/dist/v3/DevTool/components/BluetoothList/index.vue +167 -0
- package/dist/v3/{CaptureScreen → DevTool/components/CaptureScreen}/index.vue +109 -109
- package/dist/v3/{ConsoleList → DevTool/components/ConsoleList}/ConsoleItem.vue +225 -224
- package/dist/v3/{ConsoleList → DevTool/components/ConsoleList}/RunJSInput.vue +247 -249
- package/dist/v3/{ConsoleList → DevTool/components/ConsoleList}/index.vue +171 -160
- package/dist/v3/{ConsoleList → DevTool/components/ConsoleList}/staticTips.ts +1145 -1145
- package/dist/v3/{DevToolButton → DevTool/components/DevToolButton}/index.vue +7 -4
- package/dist/v3/{DevToolTitle → DevTool/components/DevToolTitle}/index.vue +24 -24
- package/dist/v3/{DevToolWindow → DevTool/components/DevToolWindow}/DevToolOverlay.vue +197 -182
- package/dist/v3/{DevToolWindow → DevTool/components/DevToolWindow}/const.ts +28 -5
- package/dist/v3/{DevToolWindow → DevTool/components/DevToolWindow}/hooks/dataUtils.ts +48 -48
- package/dist/v3/{DevToolWindow → DevTool/components/DevToolWindow}/hooks/useDevToolData.ts +387 -338
- package/dist/v3/{DevToolWindow → DevTool/components/DevToolWindow}/hooks/useDevToolHandlers.ts +629 -549
- package/dist/v3/{DevToolWindow → DevTool/components/DevToolWindow}/hooks/useDevToolOverlay.ts +197 -184
- package/dist/v3/{DevToolWindow → DevTool/components/DevToolWindow}/index.vue +67 -16
- package/dist/v3/{ElEvent → DevTool/components/ElEvent}/ElEventItem.vue +105 -105
- package/dist/v3/{ElEvent → DevTool/components/ElEvent}/index.vue +106 -109
- package/dist/v3/{Instance → DevTool/components/Instance}/components/InstanceTreeNode.vue +265 -265
- package/dist/v3/{Instance → DevTool/components/Instance}/flatten.ts +226 -226
- package/dist/v3/{Instance → DevTool/components/Instance}/index.vue +94 -94
- package/dist/v3/{Instance → DevTool/components/Instance}/registry.ts +49 -49
- package/dist/v3/{Instance → DevTool/components/Instance}/transformTree.ts +375 -375
- package/dist/v3/{Instance → DevTool/components/Instance}/transformTreeCtx.ts +268 -268
- package/dist/v3/{Instance → DevTool/components/Instance}/typing.d.ts +43 -43
- package/dist/v3/{InstanceDetail → DevTool/components/InstanceDetail}/index.vue +485 -485
- package/dist/v3/{JsonDetail → DevTool/components/JsonDetail}/index.vue +70 -70
- package/dist/v3/{NFCList → DevTool/components/NFCList}/NFCItem.vue +112 -113
- package/dist/v3/{NFCList → DevTool/components/NFCList}/NFCTool.vue +454 -478
- package/dist/v3/{NFCList → DevTool/components/NFCList}/const.ts +56 -56
- package/dist/v3/{NFCList → DevTool/components/NFCList}/index.vue +94 -98
- package/dist/v3/{NetworkList → DevTool/components/NetworkList}/InterceptConfig.vue +624 -608
- package/dist/v3/{NetworkList → DevTool/components/NetworkList}/InterceptItem.vue +140 -140
- package/dist/v3/{NetworkList → DevTool/components/NetworkList}/NetworkDetail.vue +287 -296
- package/dist/v3/{NetworkList → DevTool/components/NetworkList}/NetworkIntercept.vue +88 -93
- package/dist/v3/{NetworkList → DevTool/components/NetworkList}/NetworkItem.vue +163 -167
- package/dist/v3/{NetworkList → DevTool/components/NetworkList}/NetworkSend.vue +589 -556
- package/dist/v3/{NetworkList → DevTool/components/NetworkList}/const.ts +4 -4
- package/dist/v3/{NetworkList → DevTool/components/NetworkList}/hooks/useNetworkForm.ts +86 -86
- package/dist/v3/{NetworkList → DevTool/components/NetworkList}/index.vue +160 -160
- package/dist/v3/{NetworkList → DevTool/components/NetworkList}/utils.ts +101 -101
- package/dist/v3/{Performance → DevTool/components/Performance}/index.vue +498 -495
- package/dist/v3/{Performance → DevTool/components/Performance}/modules/PerformanceMetrics.vue +153 -153
- package/dist/v3/{Performance → DevTool/components/Performance}/modules/PerformanceWidget.vue +12 -9
- package/dist/v3/{Performance → DevTool/components/Performance}/modules/usePerformanceChart.ts +460 -460
- package/dist/v3/{Performance → DevTool/components/Performance}/modules/usePerformanceData.ts +258 -258
- package/dist/v3/{PiniaList → DevTool/components/PiniaList}/index.vue +93 -94
- package/dist/v3/{RouteList → DevTool/components/RouteList}/index.vue +21 -24
- package/dist/v3/{RunJS → DevTool/components/RunJS}/index.vue +148 -148
- package/dist/v3/{ScanCodeList → DevTool/components/ScanCodeList}/ScanCodeItem.vue +97 -98
- package/dist/v3/{ScanCodeList → DevTool/components/ScanCodeList}/index.vue +100 -104
- package/dist/v3/{SettingButton → DevTool/components/SettingButton}/index.vue +45 -45
- package/dist/v3/{SettingList → DevTool/components/SettingList}/index.vue +218 -150
- package/dist/v3/DevTool/components/SettingList/modules/SettingBarrage.vue +304 -0
- package/dist/v3/{SettingList → DevTool/components/SettingList}/modules/SettingDevTool.vue +212 -208
- package/dist/v3/{SettingList → DevTool/components/SettingList}/modules/SettingInfo.vue +157 -119
- package/dist/v3/{SettingList → DevTool/components/SettingList}/modules/SettingLanguage.vue +74 -74
- package/dist/v3/{SettingList → DevTool/components/SettingList}/modules/SettingLog.vue +230 -230
- package/dist/v3/{SettingList → DevTool/components/SettingList}/modules/SettingNetwork.vue +3 -3
- package/dist/v3/{SettingList → DevTool/components/SettingList}/modules/SettingTheme.vue +37 -7
- package/dist/v3/{SettingList → DevTool/components/SettingList}/typing.d.ts +2 -2
- package/dist/v3/{SourceCode → DevTool/components/SourceCode}/Line.vue +127 -116
- package/dist/v3/{SourceCode → DevTool/components/SourceCode}/index.vue +8 -8
- package/dist/v3/{SourceCode → DevTool/components/SourceCode}/parseCode.ts +609 -701
- package/dist/v3/{StorageList → DevTool/components/StorageList}/index.vue +174 -174
- package/dist/v3/{TransferList → DevTool/components/TransferList}/TransferDetail.vue +268 -268
- package/dist/v3/{TransferList → DevTool/components/TransferList}/TransferItem.vue +4 -4
- package/dist/v3/{TransferList → DevTool/components/TransferList}/index.vue +8 -8
- package/dist/v3/{UniEvent → DevTool/components/UniEvent}/UniEventItem.vue +6 -7
- package/dist/v3/{UniEvent → DevTool/components/UniEvent}/index.vue +6 -6
- package/dist/v3/{VuexList → DevTool/components/VuexList}/index.vue +84 -84
- package/dist/v3/{WebSocket → DevTool/components/WebSocket}/WebSocketDetail.vue +8 -8
- package/dist/v3/{WebSocket → DevTool/components/WebSocket}/WebSocketItem.vue +4 -4
- package/dist/v3/{WebSocket → DevTool/components/WebSocket}/index.vue +8 -8
- package/dist/v3/DevTool/index.vue +179 -5
- package/dist/v3/{AppTransition → components/AppTransition}/index.vue +176 -170
- package/dist/v3/{AutoSizer → components/AutoSizer}/index.vue +192 -192
- package/dist/v3/{AutoSizer → components/AutoSizer}/index1.vue +184 -184
- package/dist/v3/{AutoSizer → components/AutoSizer}/utils.ts +49 -49
- package/dist/v3/components/Barrage/BarrageItem.vue +137 -0
- package/dist/v3/components/Barrage/index.vue +202 -0
- package/dist/v3/{CircularButton → components/CircularButton}/index.vue +84 -84
- package/dist/v3/{CustomSwiper → components/CustomSwiper}/CustomSwiperItem.vue +49 -49
- package/dist/v3/{CustomSwiper → components/CustomSwiper}/index.vue +104 -104
- package/dist/v3/{DraggableContainer → components/DraggableContainer}/index.vue +1 -1
- package/dist/v3/{Empty → components/Empty}/index.vue +29 -29
- package/dist/v3/{FilterInput → components/FilterInput}/index.vue +1 -1
- package/dist/v3/{FilterSelect → components/FilterSelect}/index.vue +179 -179
- package/dist/v3/{JsonPretty → components/JsonPretty}/components/Brackets/index.vue +27 -27
- package/dist/v3/{JsonPretty → components/JsonPretty}/components/Carets/index.vue +59 -59
- package/dist/v3/{JsonPretty → components/JsonPretty}/components/CheckController/index.vue +136 -136
- package/dist/v3/{JsonPretty → components/JsonPretty}/components/TreeNode/index.vue +387 -381
- package/dist/v3/{JsonPretty → components/JsonPretty}/hooks/useClipboard.ts +21 -21
- package/dist/v3/{JsonPretty → components/JsonPretty}/hooks/useError.ts +21 -21
- package/dist/v3/{JsonPretty → components/JsonPretty}/index.vue +16 -13
- package/dist/v3/{JsonPretty → components/JsonPretty}/type.ts +127 -126
- package/dist/v3/{JsonPretty → components/JsonPretty}/utils/index.ts +169 -169
- package/dist/v3/{MovableContainer → components/MovableContainer}/index.vue +1 -1
- package/dist/v3/{Pick → components/Pick}/index.vue +322 -322
- package/dist/v3/{Tabs → components/Tabs}/index.vue +30 -4
- package/dist/v3/{Tag → components/Tag}/index.vue +113 -113
- package/dist/v3/{VirtualList → components/VirtualList}/AutoSize.vue +40 -40
- package/dist/v3/{VirtualList → components/VirtualList}/index.vue +416 -412
- package/dist/v3/hooks/useBluetooth/index.ts +561 -0
- package/dist/v3/hooks/useContainerStyle.ts +153 -153
- package/dist/v3/hooks/useNFC/index.ts +107 -107
- package/dist/v3/hooks/useNFC/typing.d.ts +396 -396
- package/dist/v3/hooks/useNFC/useNFCAndroid.ts +966 -966
- package/dist/v3/hooks/useNFC/useNFCMpWeiXin.ts +812 -812
- package/dist/v3/hooks/useNFC/utils.ts +754 -754
- package/dist/v3/hooks/useRequest/index.ts +586 -573
- package/dist/v3/hooks/useRequest/utils.ts +267 -267
- package/dist/v3/hooks/useScanCode/index.ts +206 -206
- package/dist/v3/hooks/useWebsocket/README.md +79 -0
- package/dist/v3/hooks/useWebsocket/index.ts +253 -0
- package/dist/v3/styles/theme.css +17 -10
- package/dist/v3/styles/theme.ts +12 -12
- package/package.json +59 -64
- package/dist/plugins/uniParseStock/index.d.ts +0 -10
- package/dist/plugins/uniParseStock/index.d.ts.map +0 -1
- /package/dist/v3/{DevToolWindow → DevTool/components/DevToolWindow}/index.css +0 -0
- /package/dist/v3/{SettingList → DevTool/components/SettingList}/index.css +0 -0
- /package/dist/v3/{Empty → components/Empty}/empty.png +0 -0
- /package/dist/v3/{VirtualList → components/VirtualList}/readme.md +0 -0
|
@@ -1,267 +1,267 @@
|
|
|
1
|
-
type DebounceOptions = {
|
|
2
|
-
leading?: boolean;
|
|
3
|
-
trailing?: boolean;
|
|
4
|
-
maxWait?: number; // 可选:最大等待时间
|
|
5
|
-
};
|
|
6
|
-
|
|
7
|
-
type DebouncedFunction<T extends (...args: any[]) => any> = ((
|
|
8
|
-
...args: Parameters<T>
|
|
9
|
-
) => ReturnType<T> | undefined) & {
|
|
10
|
-
cancel: () => void;
|
|
11
|
-
flush: () => ReturnType<T> | undefined;
|
|
12
|
-
};
|
|
13
|
-
|
|
14
|
-
/**
|
|
15
|
-
* 创建一个防抖函数,该函数在最后一次调用后等待指定时间才执行。
|
|
16
|
-
* @param func 需要防抖的函数
|
|
17
|
-
* @param wait 等待时间(毫秒)
|
|
18
|
-
* @param options 配置选项
|
|
19
|
-
* @param options.leading 是否在开始时立即执行
|
|
20
|
-
* @param options.trailing 是否在延迟结束后执行最后一次调用
|
|
21
|
-
* @returns 防抖后的函数
|
|
22
|
-
*/
|
|
23
|
-
export function debounce<T extends (...args: any[]) => any>(
|
|
24
|
-
func: T,
|
|
25
|
-
wait: number,
|
|
26
|
-
options: DebounceOptions = {},
|
|
27
|
-
): DebouncedFunction<T> {
|
|
28
|
-
const { leading = false, trailing = true } = options;
|
|
29
|
-
|
|
30
|
-
let timeout: ReturnType<typeof setTimeout> | null = null;
|
|
31
|
-
let lastArgs: Parameters<T> | null = null;
|
|
32
|
-
let lastThis: ThisParameterType<T> | null = null;
|
|
33
|
-
let result: ReturnType<T> | undefined;
|
|
34
|
-
let lastCallTime: number | null = null;
|
|
35
|
-
let lastInvokeTime: number = 0;
|
|
36
|
-
|
|
37
|
-
const invokeFunc = (time: number) => {
|
|
38
|
-
const args = lastArgs;
|
|
39
|
-
const thisArg = lastThis;
|
|
40
|
-
|
|
41
|
-
lastArgs = lastThis = null;
|
|
42
|
-
lastInvokeTime = time;
|
|
43
|
-
result = func.apply(thisArg, args!);
|
|
44
|
-
return result;
|
|
45
|
-
};
|
|
46
|
-
|
|
47
|
-
const leadingEdge = (time: number) => {
|
|
48
|
-
// 开始新的计时周期
|
|
49
|
-
lastInvokeTime = time;
|
|
50
|
-
// 如果 trailing 为 true,启动定时器执行最后一次调用
|
|
51
|
-
if (trailing) {
|
|
52
|
-
timeout = setTimeout(timerExpired, wait);
|
|
53
|
-
}
|
|
54
|
-
// 如果 leading 为 true,立即执行
|
|
55
|
-
return leading ? invokeFunc(time) : undefined;
|
|
56
|
-
};
|
|
57
|
-
|
|
58
|
-
const trailingEdge = (time: number) => {
|
|
59
|
-
timeout = null;
|
|
60
|
-
// 只有在 trailing 为 true 且有等待的调用时才执行
|
|
61
|
-
if (trailing && lastArgs) {
|
|
62
|
-
return invokeFunc(time);
|
|
63
|
-
}
|
|
64
|
-
lastArgs = lastThis = null;
|
|
65
|
-
return result;
|
|
66
|
-
};
|
|
67
|
-
|
|
68
|
-
const remainingWait = (time: number) => {
|
|
69
|
-
const timeSinceLastCall = time - (lastCallTime || 0);
|
|
70
|
-
const timeSinceLastInvoke = time - lastInvokeTime;
|
|
71
|
-
const timeWaiting = wait - timeSinceLastCall;
|
|
72
|
-
|
|
73
|
-
// 如果设置了最大等待时间,取最小值
|
|
74
|
-
return Math.min(timeWaiting, wait - timeSinceLastInvoke);
|
|
75
|
-
};
|
|
76
|
-
|
|
77
|
-
const shouldInvoke = (time: number) => {
|
|
78
|
-
const timeSinceLastCall = time - (lastCallTime || 0);
|
|
79
|
-
const timeSinceLastInvoke = time - lastInvokeTime;
|
|
80
|
-
|
|
81
|
-
// 第一次调用
|
|
82
|
-
if (lastCallTime === null) {
|
|
83
|
-
return leading && timeSinceLastInvoke < wait;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
// 时间间隔超过等待时间,应该执行
|
|
87
|
-
if (timeSinceLastCall >= wait) {
|
|
88
|
-
return true;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
// 如果设置了最大等待时间,并且超过最大等待时间
|
|
92
|
-
if (timeSinceLastInvoke >= wait) {
|
|
93
|
-
return true;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
return false;
|
|
97
|
-
};
|
|
98
|
-
|
|
99
|
-
const timerExpired = () => {
|
|
100
|
-
const time = Date.now();
|
|
101
|
-
if (shouldInvoke(time)) {
|
|
102
|
-
trailingEdge(time);
|
|
103
|
-
} else if (timeout) {
|
|
104
|
-
// 继续等待
|
|
105
|
-
timeout = setTimeout(timerExpired, remainingWait(time));
|
|
106
|
-
}
|
|
107
|
-
};
|
|
108
|
-
|
|
109
|
-
const debounced = function (
|
|
110
|
-
this: ThisParameterType<T>,
|
|
111
|
-
...args: Parameters<T>
|
|
112
|
-
): ReturnType<T> | undefined {
|
|
113
|
-
const time = Date.now();
|
|
114
|
-
const isInvoking = shouldInvoke(time);
|
|
115
|
-
|
|
116
|
-
lastArgs = args;
|
|
117
|
-
lastThis = this;
|
|
118
|
-
lastCallTime = time;
|
|
119
|
-
|
|
120
|
-
if (isInvoking) {
|
|
121
|
-
if (timeout === null) {
|
|
122
|
-
// 第一次调用,且 leading 为 true
|
|
123
|
-
return leadingEdge(time);
|
|
124
|
-
}
|
|
125
|
-
// 如果不是第一次调用,但在等待时间后应该执行
|
|
126
|
-
else if (timeout) {
|
|
127
|
-
clearTimeout(timeout);
|
|
128
|
-
timeout = setTimeout(timerExpired, wait);
|
|
129
|
-
// 如果 leading 为 true,立即执行
|
|
130
|
-
if (leading) {
|
|
131
|
-
return invokeFunc(time);
|
|
132
|
-
}
|
|
133
|
-
}
|
|
134
|
-
} else {
|
|
135
|
-
// 没有触发执行条件,设置定时器
|
|
136
|
-
if (!timeout) {
|
|
137
|
-
timeout = setTimeout(timerExpired, wait);
|
|
138
|
-
}
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
return result;
|
|
142
|
-
};
|
|
143
|
-
|
|
144
|
-
debounced.cancel = (): void => {
|
|
145
|
-
if (timeout !== null) {
|
|
146
|
-
clearTimeout(timeout);
|
|
147
|
-
timeout = null;
|
|
148
|
-
lastArgs = lastThis = null;
|
|
149
|
-
lastCallTime = lastInvokeTime = 0;
|
|
150
|
-
}
|
|
151
|
-
};
|
|
152
|
-
|
|
153
|
-
debounced.flush = (): ReturnType<T> | undefined => {
|
|
154
|
-
if (timeout !== null) {
|
|
155
|
-
const time = Date.now();
|
|
156
|
-
const flushedResult = trailingEdge(time);
|
|
157
|
-
return flushedResult;
|
|
158
|
-
}
|
|
159
|
-
return result;
|
|
160
|
-
};
|
|
161
|
-
|
|
162
|
-
return debounced;
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
type ThrottleOptions = {
|
|
166
|
-
leading?: boolean;
|
|
167
|
-
trailing?: boolean;
|
|
168
|
-
};
|
|
169
|
-
|
|
170
|
-
/**
|
|
171
|
-
* 创建一个节流函数,在指定时间间隔内只执行一次原函数
|
|
172
|
-
* @param func 需要节流的函数
|
|
173
|
-
* @param wait 等待时间(毫秒)
|
|
174
|
-
* @param options 配置选项
|
|
175
|
-
* @param options.leading 是否在开始时立即执行
|
|
176
|
-
* @param options.trailing 是否在延迟结束后执行最后一次调用
|
|
177
|
-
* @returns 节流后的函数
|
|
178
|
-
*/
|
|
179
|
-
|
|
180
|
-
export function throttle<T extends (...args: any[]) => any>(
|
|
181
|
-
func: T,
|
|
182
|
-
wait: number,
|
|
183
|
-
options: ThrottleOptions = {},
|
|
184
|
-
): (...args: Parameters<T>) => ReturnType<T> | undefined {
|
|
185
|
-
let timeout: ReturnType<typeof setTimeout> | null = null;
|
|
186
|
-
let lastArgs: Parameters<T> | null = null;
|
|
187
|
-
let lastThis: any = null;
|
|
188
|
-
let result: ReturnType<T> | undefined;
|
|
189
|
-
let lastCallTime: number | null = null;
|
|
190
|
-
|
|
191
|
-
const { leading = true, trailing = true } = options;
|
|
192
|
-
|
|
193
|
-
const invokeFunc = (time: number) => {
|
|
194
|
-
const args = lastArgs;
|
|
195
|
-
const thisArg = lastThis;
|
|
196
|
-
lastArgs = lastThis = null;
|
|
197
|
-
lastCallTime = time;
|
|
198
|
-
result = func.apply(thisArg, args!);
|
|
199
|
-
return result;
|
|
200
|
-
};
|
|
201
|
-
|
|
202
|
-
const leadingEdge = (time: number) => {
|
|
203
|
-
lastCallTime = time;
|
|
204
|
-
timeout = null;
|
|
205
|
-
return leading ? invokeFunc(time) : undefined;
|
|
206
|
-
};
|
|
207
|
-
|
|
208
|
-
const trailingEdge = (time: number) => {
|
|
209
|
-
timeout = null;
|
|
210
|
-
if (lastArgs && trailing) {
|
|
211
|
-
return invokeFunc(time);
|
|
212
|
-
}
|
|
213
|
-
lastArgs = lastThis = null;
|
|
214
|
-
return result;
|
|
215
|
-
};
|
|
216
|
-
|
|
217
|
-
const remainingWait = (time: number) => {
|
|
218
|
-
if (lastCallTime === null) return wait;
|
|
219
|
-
const timeSinceLastCall = time - lastCallTime;
|
|
220
|
-
return wait - timeSinceLastCall;
|
|
221
|
-
};
|
|
222
|
-
|
|
223
|
-
const shouldInvoke = (time: number) => {
|
|
224
|
-
if (lastCallTime === null) return true;
|
|
225
|
-
const timeSinceLastCall = time - lastCallTime;
|
|
226
|
-
return timeSinceLastCall >= wait || timeSinceLastCall < 0;
|
|
227
|
-
};
|
|
228
|
-
|
|
229
|
-
const timerExpired = () => {
|
|
230
|
-
const time = Date.now();
|
|
231
|
-
if (shouldInvoke(time)) {
|
|
232
|
-
return trailingEdge(time);
|
|
233
|
-
}
|
|
234
|
-
timeout = setTimeout(timerExpired, remainingWait(time));
|
|
235
|
-
return undefined;
|
|
236
|
-
};
|
|
237
|
-
|
|
238
|
-
const throttled = function (this: any, ...args: Parameters<T>) {
|
|
239
|
-
const time = Date.now();
|
|
240
|
-
const isInvoking = shouldInvoke(time);
|
|
241
|
-
|
|
242
|
-
lastArgs = args;
|
|
243
|
-
lastThis = this;
|
|
244
|
-
|
|
245
|
-
if (isInvoking) {
|
|
246
|
-
if (timeout === null) {
|
|
247
|
-
return leadingEdge(time);
|
|
248
|
-
}
|
|
249
|
-
}
|
|
250
|
-
|
|
251
|
-
if (timeout === null) {
|
|
252
|
-
timeout = setTimeout(timerExpired, wait);
|
|
253
|
-
}
|
|
254
|
-
|
|
255
|
-
return result;
|
|
256
|
-
};
|
|
257
|
-
|
|
258
|
-
throttled.cancel = () => {
|
|
259
|
-
if (timeout !== null) {
|
|
260
|
-
clearTimeout(timeout);
|
|
261
|
-
}
|
|
262
|
-
lastCallTime = null;
|
|
263
|
-
timeout = lastArgs = lastThis = null;
|
|
264
|
-
};
|
|
265
|
-
|
|
266
|
-
return throttled;
|
|
267
|
-
}
|
|
1
|
+
type DebounceOptions = {
|
|
2
|
+
leading?: boolean;
|
|
3
|
+
trailing?: boolean;
|
|
4
|
+
maxWait?: number; // 可选:最大等待时间
|
|
5
|
+
};
|
|
6
|
+
|
|
7
|
+
type DebouncedFunction<T extends (...args: any[]) => any> = ((
|
|
8
|
+
...args: Parameters<T>
|
|
9
|
+
) => ReturnType<T> | undefined) & {
|
|
10
|
+
cancel: () => void;
|
|
11
|
+
flush: () => ReturnType<T> | undefined;
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* 创建一个防抖函数,该函数在最后一次调用后等待指定时间才执行。
|
|
16
|
+
* @param func 需要防抖的函数
|
|
17
|
+
* @param wait 等待时间(毫秒)
|
|
18
|
+
* @param options 配置选项
|
|
19
|
+
* @param options.leading 是否在开始时立即执行
|
|
20
|
+
* @param options.trailing 是否在延迟结束后执行最后一次调用
|
|
21
|
+
* @returns 防抖后的函数
|
|
22
|
+
*/
|
|
23
|
+
export function debounce<T extends (...args: any[]) => any>(
|
|
24
|
+
func: T,
|
|
25
|
+
wait: number,
|
|
26
|
+
options: DebounceOptions = {},
|
|
27
|
+
): DebouncedFunction<T> {
|
|
28
|
+
const { leading = false, trailing = true } = options;
|
|
29
|
+
|
|
30
|
+
let timeout: ReturnType<typeof setTimeout> | null = null;
|
|
31
|
+
let lastArgs: Parameters<T> | null = null;
|
|
32
|
+
let lastThis: ThisParameterType<T> | null = null;
|
|
33
|
+
let result: ReturnType<T> | undefined;
|
|
34
|
+
let lastCallTime: number | null = null;
|
|
35
|
+
let lastInvokeTime: number = 0;
|
|
36
|
+
|
|
37
|
+
const invokeFunc = (time: number) => {
|
|
38
|
+
const args = lastArgs;
|
|
39
|
+
const thisArg = lastThis;
|
|
40
|
+
|
|
41
|
+
lastArgs = lastThis = null;
|
|
42
|
+
lastInvokeTime = time;
|
|
43
|
+
result = func.apply(thisArg, args!);
|
|
44
|
+
return result;
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
const leadingEdge = (time: number) => {
|
|
48
|
+
// 开始新的计时周期
|
|
49
|
+
lastInvokeTime = time;
|
|
50
|
+
// 如果 trailing 为 true,启动定时器执行最后一次调用
|
|
51
|
+
if (trailing) {
|
|
52
|
+
timeout = setTimeout(timerExpired, wait);
|
|
53
|
+
}
|
|
54
|
+
// 如果 leading 为 true,立即执行
|
|
55
|
+
return leading ? invokeFunc(time) : undefined;
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
const trailingEdge = (time: number) => {
|
|
59
|
+
timeout = null;
|
|
60
|
+
// 只有在 trailing 为 true 且有等待的调用时才执行
|
|
61
|
+
if (trailing && lastArgs) {
|
|
62
|
+
return invokeFunc(time);
|
|
63
|
+
}
|
|
64
|
+
lastArgs = lastThis = null;
|
|
65
|
+
return result;
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
const remainingWait = (time: number) => {
|
|
69
|
+
const timeSinceLastCall = time - (lastCallTime || 0);
|
|
70
|
+
const timeSinceLastInvoke = time - lastInvokeTime;
|
|
71
|
+
const timeWaiting = wait - timeSinceLastCall;
|
|
72
|
+
|
|
73
|
+
// 如果设置了最大等待时间,取最小值
|
|
74
|
+
return Math.min(timeWaiting, wait - timeSinceLastInvoke);
|
|
75
|
+
};
|
|
76
|
+
|
|
77
|
+
const shouldInvoke = (time: number) => {
|
|
78
|
+
const timeSinceLastCall = time - (lastCallTime || 0);
|
|
79
|
+
const timeSinceLastInvoke = time - lastInvokeTime;
|
|
80
|
+
|
|
81
|
+
// 第一次调用
|
|
82
|
+
if (lastCallTime === null) {
|
|
83
|
+
return leading && timeSinceLastInvoke < wait;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
// 时间间隔超过等待时间,应该执行
|
|
87
|
+
if (timeSinceLastCall >= wait) {
|
|
88
|
+
return true;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
// 如果设置了最大等待时间,并且超过最大等待时间
|
|
92
|
+
if (timeSinceLastInvoke >= wait) {
|
|
93
|
+
return true;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
return false;
|
|
97
|
+
};
|
|
98
|
+
|
|
99
|
+
const timerExpired = () => {
|
|
100
|
+
const time = Date.now();
|
|
101
|
+
if (shouldInvoke(time)) {
|
|
102
|
+
trailingEdge(time);
|
|
103
|
+
} else if (timeout) {
|
|
104
|
+
// 继续等待
|
|
105
|
+
timeout = setTimeout(timerExpired, remainingWait(time));
|
|
106
|
+
}
|
|
107
|
+
};
|
|
108
|
+
|
|
109
|
+
const debounced = function (
|
|
110
|
+
this: ThisParameterType<T>,
|
|
111
|
+
...args: Parameters<T>
|
|
112
|
+
): ReturnType<T> | undefined {
|
|
113
|
+
const time = Date.now();
|
|
114
|
+
const isInvoking = shouldInvoke(time);
|
|
115
|
+
|
|
116
|
+
lastArgs = args;
|
|
117
|
+
lastThis = this;
|
|
118
|
+
lastCallTime = time;
|
|
119
|
+
|
|
120
|
+
if (isInvoking) {
|
|
121
|
+
if (timeout === null) {
|
|
122
|
+
// 第一次调用,且 leading 为 true
|
|
123
|
+
return leadingEdge(time);
|
|
124
|
+
}
|
|
125
|
+
// 如果不是第一次调用,但在等待时间后应该执行
|
|
126
|
+
else if (timeout) {
|
|
127
|
+
clearTimeout(timeout);
|
|
128
|
+
timeout = setTimeout(timerExpired, wait);
|
|
129
|
+
// 如果 leading 为 true,立即执行
|
|
130
|
+
if (leading) {
|
|
131
|
+
return invokeFunc(time);
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
} else {
|
|
135
|
+
// 没有触发执行条件,设置定时器
|
|
136
|
+
if (!timeout) {
|
|
137
|
+
timeout = setTimeout(timerExpired, wait);
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
return result;
|
|
142
|
+
};
|
|
143
|
+
|
|
144
|
+
debounced.cancel = (): void => {
|
|
145
|
+
if (timeout !== null) {
|
|
146
|
+
clearTimeout(timeout);
|
|
147
|
+
timeout = null;
|
|
148
|
+
lastArgs = lastThis = null;
|
|
149
|
+
lastCallTime = lastInvokeTime = 0;
|
|
150
|
+
}
|
|
151
|
+
};
|
|
152
|
+
|
|
153
|
+
debounced.flush = (): ReturnType<T> | undefined => {
|
|
154
|
+
if (timeout !== null) {
|
|
155
|
+
const time = Date.now();
|
|
156
|
+
const flushedResult = trailingEdge(time);
|
|
157
|
+
return flushedResult;
|
|
158
|
+
}
|
|
159
|
+
return result;
|
|
160
|
+
};
|
|
161
|
+
|
|
162
|
+
return debounced;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
type ThrottleOptions = {
|
|
166
|
+
leading?: boolean;
|
|
167
|
+
trailing?: boolean;
|
|
168
|
+
};
|
|
169
|
+
|
|
170
|
+
/**
|
|
171
|
+
* 创建一个节流函数,在指定时间间隔内只执行一次原函数
|
|
172
|
+
* @param func 需要节流的函数
|
|
173
|
+
* @param wait 等待时间(毫秒)
|
|
174
|
+
* @param options 配置选项
|
|
175
|
+
* @param options.leading 是否在开始时立即执行
|
|
176
|
+
* @param options.trailing 是否在延迟结束后执行最后一次调用
|
|
177
|
+
* @returns 节流后的函数
|
|
178
|
+
*/
|
|
179
|
+
|
|
180
|
+
export function throttle<T extends (...args: any[]) => any>(
|
|
181
|
+
func: T,
|
|
182
|
+
wait: number,
|
|
183
|
+
options: ThrottleOptions = {},
|
|
184
|
+
): (...args: Parameters<T>) => ReturnType<T> | undefined {
|
|
185
|
+
let timeout: ReturnType<typeof setTimeout> | null = null;
|
|
186
|
+
let lastArgs: Parameters<T> | null = null;
|
|
187
|
+
let lastThis: any = null;
|
|
188
|
+
let result: ReturnType<T> | undefined;
|
|
189
|
+
let lastCallTime: number | null = null;
|
|
190
|
+
|
|
191
|
+
const { leading = true, trailing = true } = options;
|
|
192
|
+
|
|
193
|
+
const invokeFunc = (time: number) => {
|
|
194
|
+
const args = lastArgs;
|
|
195
|
+
const thisArg = lastThis;
|
|
196
|
+
lastArgs = lastThis = null;
|
|
197
|
+
lastCallTime = time;
|
|
198
|
+
result = func.apply(thisArg, args!);
|
|
199
|
+
return result;
|
|
200
|
+
};
|
|
201
|
+
|
|
202
|
+
const leadingEdge = (time: number) => {
|
|
203
|
+
lastCallTime = time;
|
|
204
|
+
timeout = null;
|
|
205
|
+
return leading ? invokeFunc(time) : undefined;
|
|
206
|
+
};
|
|
207
|
+
|
|
208
|
+
const trailingEdge = (time: number) => {
|
|
209
|
+
timeout = null;
|
|
210
|
+
if (lastArgs && trailing) {
|
|
211
|
+
return invokeFunc(time);
|
|
212
|
+
}
|
|
213
|
+
lastArgs = lastThis = null;
|
|
214
|
+
return result;
|
|
215
|
+
};
|
|
216
|
+
|
|
217
|
+
const remainingWait = (time: number) => {
|
|
218
|
+
if (lastCallTime === null) return wait;
|
|
219
|
+
const timeSinceLastCall = time - lastCallTime;
|
|
220
|
+
return wait - timeSinceLastCall;
|
|
221
|
+
};
|
|
222
|
+
|
|
223
|
+
const shouldInvoke = (time: number) => {
|
|
224
|
+
if (lastCallTime === null) return true;
|
|
225
|
+
const timeSinceLastCall = time - lastCallTime;
|
|
226
|
+
return timeSinceLastCall >= wait || timeSinceLastCall < 0;
|
|
227
|
+
};
|
|
228
|
+
|
|
229
|
+
const timerExpired = () => {
|
|
230
|
+
const time = Date.now();
|
|
231
|
+
if (shouldInvoke(time)) {
|
|
232
|
+
return trailingEdge(time);
|
|
233
|
+
}
|
|
234
|
+
timeout = setTimeout(timerExpired, remainingWait(time));
|
|
235
|
+
return undefined;
|
|
236
|
+
};
|
|
237
|
+
|
|
238
|
+
const throttled = function (this: any, ...args: Parameters<T>) {
|
|
239
|
+
const time = Date.now();
|
|
240
|
+
const isInvoking = shouldInvoke(time);
|
|
241
|
+
|
|
242
|
+
lastArgs = args;
|
|
243
|
+
lastThis = this;
|
|
244
|
+
|
|
245
|
+
if (isInvoking) {
|
|
246
|
+
if (timeout === null) {
|
|
247
|
+
return leadingEdge(time);
|
|
248
|
+
}
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
if (timeout === null) {
|
|
252
|
+
timeout = setTimeout(timerExpired, wait);
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
return result;
|
|
256
|
+
};
|
|
257
|
+
|
|
258
|
+
throttled.cancel = () => {
|
|
259
|
+
if (timeout !== null) {
|
|
260
|
+
clearTimeout(timeout);
|
|
261
|
+
}
|
|
262
|
+
lastCallTime = null;
|
|
263
|
+
timeout = lastArgs = lastThis = null;
|
|
264
|
+
};
|
|
265
|
+
|
|
266
|
+
return throttled;
|
|
267
|
+
}
|