diff --git a/packages/vant/docs/markdown/use-raf.en-US.md b/packages/vant/docs/markdown/use-raf.en-US.md index 631cc0779..2aef3a884 100644 --- a/packages/vant/docs/markdown/use-raf.en-US.md +++ b/packages/vant/docs/markdown/use-raf.en-US.md @@ -6,9 +6,9 @@ Provide convenient call and cancellation of [requestAnimationFrame](https://deve ## Usage -### Basic Usage +### Single Call -### Single call +By using the `useRaf` method, you can execute a function before the next browser repaint. ```js import { useRaf } from '@vant/use'; @@ -16,35 +16,34 @@ import { useRaf } from '@vant/use'; export default { setup() { let count = 0; - // A single call will be automatically canceledRaf after the callback is executed. useRaf(() => { - count++; - console.log(count); // It will only be executed once. + console.log(++count); // It will only be executed once. }); }, }; ``` -### Unlimited calls +### Loop Calls + +By using the `isLoop` option, you can execution of a function repeatedly at a specified interval until it is canceled. ```js import { useRaf } from '@vant/use'; export default { setup() { - // isLoop Turn on the cycle let count = 0; const cancelRaf = useRaf( () => { - count++; - console.log(count); // Unlimited execution until it is cancelled. + console.log(++count); // Execute infinitely until canceled + if (count === 5) { cancelRaf(); } }, { - interval: 0, // control interval to call this function - isLoop: true, + isLoop: true, // Enable the loop + interval: 100, // Set call interval }, ); }, @@ -62,12 +61,12 @@ function useRaf( interval?: number; isLoop?: boolean; }, -) {} +): void; ``` ### Params | Name | Description | Type | Default | | --- | --- | --- | --- | -| callback | Callback | _() => void_ | _() => void_ | +| callback | Callback | _() => void_ | - | | options | Options | _{ interval?: number; isLoop?: boolean }_ | _{ interval: 0; isLoop: false }_ | diff --git a/packages/vant/docs/markdown/use-raf.zh-CN.md b/packages/vant/docs/markdown/use-raf.zh-CN.md index 4d6eea746..1a00cd2d9 100644 --- a/packages/vant/docs/markdown/use-raf.zh-CN.md +++ b/packages/vant/docs/markdown/use-raf.zh-CN.md @@ -6,20 +6,18 @@ ## 代码演示 -### 基本用法 - ### 单次调用 +通过 `useRaf` 方法,可以在下一次浏览器重新绘制之前调用指定的函数。 + ```js import { useRaf } from '@vant/use'; export default { setup() { let count = 0; - // 单次调用在回调执行完后会被自动 cancelRaf useRaf(() => { - count++; - console.log(count); // 只会执行 1 次 + console.log(++count); // 只会执行 1 次 }); }, }; @@ -27,24 +25,25 @@ export default { ### 循环调用 +通过开启 `isLoop` 选项,你可以按指定的间隔重复执行某个函数,直到被取消。 + ```js import { useRaf } from '@vant/use'; export default { setup() { - // isLoop 开启循环 let count = 0; const cancelRaf = useRaf( () => { - count++; - console.log(count); // 无限的执行,直到被 cancel + console.log(++count); // 无限执行,直到被 cancel + if (count === 5) { cancelRaf(); } }, { - interval: 0, // 控制间隔多久去调用 - isLoop: true, + isLoop: true, // 开启循环 + interval: 100, // 设置调用间隔 }, ); }, @@ -62,12 +61,12 @@ function useRaf( interval?: number; isLoop?: boolean; }, -) {} +): void; ``` ### 参数 | 参数 | 说明 | 类型 | 默认 | | --- | --- | --- | --- | -| callback | 回调函数 | _() => void_ | _() => void_ | +| callback | 回调函数 | _() => void_ | - | | options | 配置参数 | _{ interval?: number; isLoop?: boolean }_ | _{ interval: 0; isLoop: false }_ |