Skip to content

Commit 45b06c8

Browse files
NelsonYongNelsonYong
committed
docs: fix & update
1 parent 8d7fb2b commit 45b06c8

File tree

14 files changed

+382
-2744
lines changed

14 files changed

+382
-2744
lines changed

‎docs/demo/useThrottle/demo.vue‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
11
<template>
22
<div>
3-
<input type="text" placeholder="input" v-model="valueRef">
3+
<input type="text" placeholder="input" v-model="valueRef" />
44
<p>ThrottledValue：{{ throttledValue }}</p>
55
</div>
66
</template>
77

88
<script lang="ts" setup>
99
import { ref } from 'vue'
1010
11-
import { useThrottle } from 'vue-hooks-plus'
11+
import { useThrottle, useTimeout } from 'vue-hooks-plus'
1212
const valueRef = ref('')
13+
const waitRef = ref(500)
1314
14-
const throttledValue = useThrottle(valueRef, { wait: 500 })
15+
useTimeout(() => {
16+
waitRef.value = 2000
17+
}, 2000)
18+
const throttledValue = useThrottle(valueRef, { wait: waitRef })
1519
</script>

‎docs/en/hooks/useDebounce.md‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,16 @@ const debouncedValue = useDebounce(
3535

3636
| Property | Description | Type | Default |
3737
| --- | --- | --- | --- |
38-
| wait | The number of milliseconds to delay. | `number` | `1000` |
39-
| leading | Specify invoking on the leading edge of the timeout. | `boolean` | `false` |
40-
| trailing | Specify invoking on the trailing edge of the timeout. | `boolean` | `true` |
41-
| maxWait | The maximum time func is allowed to be delayed before it’s invoked. | `number` | - |
38+
| wait | The number of milliseconds to delay. | `number`\|`Ref<number>` | `1000` |
39+
| leading | Specify invoking on the leading edge of the timeout. | `boolean`\|`Ref<boolean>` | `false` |
40+
| trailing | Specify invoking on the trailing edge of the timeout. | `boolean`\|`Ref<boolean>` | `true` |
41+
| maxWait | The maximum time func is allowed to be delayed before it’s invoked. | `number`\|`Ref<number>` | - |
42+
43+
::: warning Remark
44+
45+
- `options.wait` support dynamic changes.
46+
- `options.leading` support dynamic changes.
47+
- `options.trailing` support dynamic changes.
48+
- `options.maxWait` support dynamic changes.
49+
50+
:::

‎docs/en/hooks/useThrottle.md‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,16 @@ const throttledValue = useThrottle(
3333

3434
## Options
3535

36-
| Property | Description | Type | Default |
37-
| -------- | ----------------------------------------------------- | --------- | ------- |
38-
| wait | The number of milliseconds to delay. | `number` | `1000` |
39-
| leading | Specify invoking on the leading edge of the timeout. | `boolean` | `true` |
40-
| trailing | Specify invoking on the trailing edge of the timeout. | `boolean` | `true` |
36+
| Property | Description | Type | Default |
37+
| --- | --- | --- | --- |
38+
| wait | The number of milliseconds to delay. | `number`\|`Ref<number>` | `1000` |
39+
| leading | Specify invoking on the leading edge of the timeout. | `boolean`\|`Ref<boolean>` | `false` |
40+
| trailing | Specify invoking on the trailing edge of the timeout. | `boolean`\|`Ref<boolean>` | `true` |
41+
42+
::: warning Remark
43+
44+
- `options.wait` support dynamic changes.
45+
- `options.leading` support dynamic changes.
46+
- `options.trailing` support dynamic changes.
47+
48+
:::

‎docs/en/hooks/useThrottleFn.md‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -37,11 +37,11 @@ const {
3737

3838
## Options
3939

40-
| Property | Description | Type | Default |
41-
| -------- | ----------------------------------------------------- | --------- | ------- |
42-
| wait | The number of milliseconds to delay. | `number` | `1000` |
43-
| leading | Specify invoking on the leading edge of the timeout. | `boolean` | `true` |
44-
| trailing | Specify invoking on the trailing edge of the timeout. | `boolean` | `true` |
40+
| Property | Description | Type | Default |
41+
| --- | --- | --- | --- |
42+
| wait | The number of milliseconds to delay. | `number`\|`Ref<number>` | `1000` |
43+
| leading | Specify invoking on the leading edge of the timeout. | `boolean`\|`Ref<boolean>` | `false` |
44+
| trailing | Specify invoking on the trailing edge of the timeout. | `boolean`\|`Ref<boolean>` | `true` |
4545

4646
## Result
4747

@@ -50,3 +50,11 @@ const {
5050
| run | Invoke and pass parameters to fn. | `(...args: any[]) => any` |
5151
| cancel | Cancel the invocation of currently throttled function. | `() => void` |
5252
| flush | Immediately invoke currently throttled function | `() => void` |
53+
54+
::: warning Remark
55+
56+
- `options.wait` support dynamic changes.
57+
- `options.leading` support dynamic changes.
58+
- `options.trailing` support dynamic changes.
59+
60+
:::

‎docs/tsconfig.json‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
{
2-
"extends": "../tsconfig.json",
32
"compilerOptions": {
43
"outDir": "./dist", //输出文件
54
"lib": ["esnext", "dom"],
65
"baseUrl": "./",
76
"rootDir": "./",
8-
"types": ["node", "vitest", "vitest/globals"],
7+
"types": ["node"],
98
"paths": {
109
"vue-hooks-plus": ["../packages/hooks/src/index.ts"]
1110
}
1211
},
13-
"include": ["src/**/*.ts", "demo/**/*.vue", "docs/global.d.ts"],
14-
"exclude": ["node_modules", "dist", "lib", "es", "example", "test-utils/*"]
12+
"extends": "../tsconfig.json",
13+
"include": [".vitepress/**/*.ts", "./demo/**/*.vue", "./components/**/*.vue"]
1514
}

‎docs/zh/hooks/useDebounce.md‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,20 @@ const debouncedValue = useDebounce(
3333
| value | 需要防抖的值 | `Ref<any>` | - |
3434
| options | 配置防抖的行为 | `Options` | - |
3535

36+
3637
## Options
3738

3839
| 参数 | 说明 | 类型 | 默认值 |
3940
| -------- | ------------------------ | --------- | ------- |
40-
| wait | 超时时间，单位为毫秒 | `number` | `1000` |
41-
| leading | 是否在延迟开始前调用函数 | `boolean` | `false` |
42-
| trailing | 是否在延迟开始后调用函数 | `boolean` | `true` |
43-
| maxWait | 最大等待时间，单位为毫秒 | `number` | - |
41+
| wait | 超时时间，单位为毫秒 | `number`\|`Ref<number>` | `1000` |
42+
| leading | 是否在延迟开始前调用函数 | `boolean`\|`Ref<boolean>` | `false` |
43+
| trailing | 是否在延迟开始后调用函数 | `boolean`\|`Ref<boolean>` | `true` |
44+
| maxWait | 最大等待时间，单位为毫秒 | `number` |- |
45+
46+
::: warning 注意
47+
48+
- `options.wait` 支持动态变化。
49+
- `options.leading` 支持动态变化。
50+
- `options.trailing` 支持动态变化。
51+
- `options.maxWait` 支持动态变化。
52+
:::

‎docs/zh/hooks/useDebounceFn.md‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,10 @@ const {
3939

4040
| 参数 | 说明 | 类型 | 默认值 |
4141
| -------- | ------------------------ | --------- | ------- |
42-
| wait | 等待时间，单位为毫秒 | `number` | `1000` |
43-
| leading | 是否在延迟开始前调用函数 | `boolean` | `false` |
44-
| trailing | 是否在延迟开始后调用函数 | `boolean` | `true` |
45-
| maxWait | 最大等待时间，单位为毫秒 | `number` | - |
42+
| wait | 超时时间，单位为毫秒 | `number`\|`Ref<number>` | `1000` |
43+
| leading | 是否在延迟开始前调用函数 | `boolean`\|`Ref<boolean>` | `false` |
44+
| trailing | 是否在延迟开始后调用函数 | `boolean`\|`Ref<boolean>` | `true` |
45+
| maxWait | 最大等待时间，单位为毫秒 | `number` |- |
4646

4747
## Result
4848

@@ -51,3 +51,11 @@ const {
5151
| run | 触发执行 fn，函数参数将会传递给 fn | `(...args: any[]) => any` |
5252
| cancel | 取消当前防抖 | `() => void` |
5353
| flush | 立即调用当前防抖函数 | `() => void` |
54+
55+
::: warning 注意
56+
57+
- `options.wait` 支持动态变化。
58+
- `options.leading` 支持动态变化。
59+
- `options.trailing` 支持动态变化。
60+
- `options.maxWait` 支持动态变化。
61+
:::

‎docs/zh/hooks/useThrottle.md‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,13 @@ const throttledValue = useThrottle(
3535

3636
| 参数 | 说明 | 类型 | 默认值 |
3737
| -------- | ------------------------ | --------- | ------ |
38-
| wait | 等待时间，单位为毫秒 | `number` | `1000` |
39-
| leading | 是否在延迟开始前调用函数 | `boolean` | `true` |
40-
| trailing | 是否在延迟开始后调用函数 | `boolean` | `true` |
38+
| wait | 超时时间，单位为毫秒 | `number`\|`Ref<number>` | `1000` |
39+
| leading | 是否在延迟开始前调用函数 | `boolean`\|`Ref<boolean>` | `false` |
40+
| trailing | 是否在延迟开始后调用函数 | `boolean`\|`Ref<boolean>` | `true` |
41+
42+
::: warning 注意
43+
44+
- `options.wait` 支持动态变化。
45+
- `options.leading` 支持动态变化。
46+
- `options.trailing` 支持动态变化。
47+
:::

‎docs/zh/hooks/useThrottleFn.md‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,9 @@ const {
3939

4040
| 参数 | 说明 | 类型 | 默认值 |
4141
| -------- | ------------------------ | --------- | ------ |
42-
| wait | 等待时间，单位为毫秒 | `number` | `1000` |
43-
| leading | 是否在延迟开始前调用函数 | `boolean` | `true` |
44-
| trailing | 是否在延迟开始后调用函数 | `boolean` | `true` |
42+
| wait | 超时时间，单位为毫秒 | `number`\|`Ref<number>` | `1000` |
43+
| leading | 是否在延迟开始前调用函数 | `boolean`\|`Ref<boolean>` | `false` |
44+
| trailing | 是否在延迟开始后调用函数 | `boolean`\|`Ref<boolean>` | `true` |
4545

4646
## Result
4747

@@ -50,3 +50,10 @@ const {
5050
| run | 触发执行 fn，函数参数将会传递给 fn | `(...args: any[]) => any` |
5151
| cancel | 取消当前节流 | `() => void` |
5252
| flush | 当前节流立即调用 | `() => void` |
53+
54+
::: warning 注意
55+
56+
- `options.wait` 支持动态变化。
57+
- `options.leading` 支持动态变化。
58+
- `options.trailing` 支持动态变化。
59+
:::

‎packages/hooks/src/useRequest/plugins/useThrottlePlugin.ts‎

Lines changed: 35 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { computed, unref, watchEffect } from 'vue'
1+
import { computed, onUnmounted, ref, unref, watch } from 'vue'
22
import { type DebouncedFunc, type ThrottleSettings } from 'lodash-es'
33
import { throttle } from 'lodash-es'
44
import { UseRequestPlugin } from '../types'
@@ -7,6 +7,9 @@ const useThrottlePlugin: UseRequestPlugin<unknown, unknown[]> = (
77
fetchInstance,
88
{ throttleWait, throttleLeading, throttleTrailing },
99
) => {
10+
11+
let originThrottled: DebouncedFunc<any> | null = null
12+
1013
const options = computed(() => {
1114
const ret: ThrottleSettings = {}
1215
if (unref(throttleLeading) !== undefined) {
@@ -18,44 +21,51 @@ const useThrottlePlugin: UseRequestPlugin<unknown, unknown[]> = (
1821
return ret
1922
})
2023

21-
// @ts-ignore
22-
const throttledRef = computed<DebouncedFunc<any>>(() =>
23-
throttle(
24-
(callback: () => void) => {
24+
const _originRunAsync = fetchInstance.runAsync.bind(fetchInstance)
25+
const throttled = ref<DebouncedFunc<any>>()
26+
27+
watch([throttleWait, options], (cur) => {
28+
if (originThrottled) {
29+
originThrottled.cancel()
30+
fetchInstance.runAsync = _originRunAsync
31+
}
32+
const [curWait, curOptions] = cur
33+
const _throttle = throttle(
34+
(callback: any) => {
2535
callback()
2636
},
27-
unref(throttleWait),
28-
options.value,
29-
),
30-
)
31-
32-
watchEffect(onInvalidate => {
33-
if (unref(throttleWait)) {
34-
const _originRunAsync = fetchInstance.runAsync.bind(fetchInstance)
35-
fetchInstance.runAsync = (...args) => {
36-
return new Promise((resolve, reject) => {
37-
throttledRef.value?.(() => {
38-
_originRunAsync(...args)
39-
.then(resolve)
40-
.catch(reject)
41-
})
37+
// @ts-ignore
38+
unref(curWait),
39+
// @ts-ignore
40+
curOptions,
41+
)
42+
originThrottled = _throttle
43+
throttled.value = _throttle
44+
fetchInstance.runAsync = (...args) => {
45+
return new Promise((resolve, reject) => {
46+
throttled.value?.(() => {
47+
_originRunAsync(...args)
48+
.then(resolve)
49+
.catch(reject)
4250
})
43-
}
44-
onInvalidate(() => {
45-
fetchInstance.runAsync = _originRunAsync
46-
throttledRef.value?.cancel()
4751
})
4852
}
53+
}, {
54+
immediate: true,
4955
})
5056

5157
if (!unref(throttleWait)) {
5258
return {}
5359
}
5460

61+
onUnmounted(() => {
62+
throttled.value?.cancel()
63+
})
64+
5565
return {
5666
name: "throttlePlugin",
5767
onCancel: () => {
58-
throttledRef.value?.cancel()
68+
throttled.value?.cancel()
5969
},
6070
}
6171
}

0 commit comments

Comments
 (0)