mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs: improve use-raf document (#12224)
This commit is contained in:
parent
37f4500e3c
commit
a2aba759ae
@ -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 }_ |
|
||||
|
@ -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 }_ |
|
||||
|
Loading…
x
Reference in New Issue
Block a user