介紹

提供便捷的 requestAnimationFrame 的調(diào)用和取消。

代碼演示

單次調(diào)用

通過 useRaf 方法，可以在下一次瀏覽器重新繪制之前調(diào)用指定的函數(shù)。

import { useRaf } from '@vant/use';

export default {
  setup() {
    let count = 0;
    useRaf(() => {
      console.log(++count); // 只會執(zhí)行 1 次
    });
  },
};

循環(huán)調(diào)用

通過開啟 isLoop 選項，你可以按指定的間隔重復執(zhí)行某個函數(shù)，直到被取消。

import { useRaf } from '@vant/use';

export default {
  setup() {
    let count = 0;
    const cancelRaf = useRaf(
      () => {
        console.log(++count); // 無限執(zhí)行，直到被 cancel

        if (count === 5) {
          cancelRaf();
        }
      },
      {
        isLoop: true, // 開啟循環(huán)
        interval: 100, // 設(shè)置調(diào)用間隔
      },
    );
  },
};

API

類型定義

function useRaf(
  callback: () => void,
  options: {
    interval?: number;
    isLoop?: boolean;
  },
): void;

參數(shù)