docs: improve use-raf document (#12224)

This commit is contained in:
neverland
2023-08-27 15:57:10 +08:00
committed by GitHub
parent 37f4500e3c
commit a2aba759ae
2 changed files with 23 additions and 25 deletions
+11 -12
View File
@@ -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 }_ |