From 3ab5098005bc581cdde187d53717eeff069cef22 Mon Sep 17 00:00:00 2001 From: "max.lee" Date: Fri, 6 Oct 2023 11:06:11 +0800 Subject: [PATCH 1/3] feat: option fpsLimit for useRafFn --- packages/core/useRafFn/index.ts | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/core/useRafFn/index.ts b/packages/core/useRafFn/index.ts index 77f4194004e..17e2a947aa4 100644 --- a/packages/core/useRafFn/index.ts +++ b/packages/core/useRafFn/index.ts @@ -14,6 +14,7 @@ export interface UseRafFnCallbackArguments { * Time elapsed since the creation of the web page. See {@link https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp#the_time_origin Time origin}. */ timestamp: DOMHighResTimeStamp + } export interface UseRafFnOptions extends ConfigurableWindow { @@ -23,6 +24,12 @@ export interface UseRafFnOptions extends ConfigurableWindow { * @default true */ immediate?: boolean + /** + * The maximum delta value in milliseconds for a frame to be considered valid. + * + * @default undefined + */ + fpsLimit?: number } /** @@ -35,10 +42,12 @@ export interface UseRafFnOptions extends ConfigurableWindow { export function useRafFn(fn: (args: UseRafFnCallbackArguments) => void, options: UseRafFnOptions = {}): Pausable { const { immediate = true, + fpsLimit = undefined, window = defaultWindow, } = options const isActive = ref(false) + const interval: null | number = fpsLimit ? 1000 / fpsLimit : null let previousFrameTimestamp = 0 let rafId: null | number = null @@ -48,6 +57,11 @@ export function useRafFn(fn: (args: UseRafFnCallbackArguments) => void, options: const delta = timestamp - (previousFrameTimestamp || timestamp) + if (interval && delta < interval) { + rafId = window.requestAnimationFrame(loop) + return + } + fn({ delta, timestamp }) previousFrameTimestamp = timestamp From 76a02963e6a70382c4432d43d8de0fe0fcd4279c Mon Sep 17 00:00:00 2001 From: "max.lee" Date: Fri, 6 Oct 2023 11:11:45 +0800 Subject: [PATCH 2/3] Remove redundant line breaks --- packages/core/useRafFn/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/core/useRafFn/index.ts b/packages/core/useRafFn/index.ts index 17e2a947aa4..016e4c8f100 100644 --- a/packages/core/useRafFn/index.ts +++ b/packages/core/useRafFn/index.ts @@ -14,7 +14,6 @@ export interface UseRafFnCallbackArguments { * Time elapsed since the creation of the web page. See {@link https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp#the_time_origin Time origin}. */ timestamp: DOMHighResTimeStamp - } export interface UseRafFnOptions extends ConfigurableWindow { From fdbfaeee86de8c80cbe0e799481e32b06e136eb5 Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Sat, 7 Oct 2023 15:07:25 +0800 Subject: [PATCH 3/3] chore: rename internal vars --- packages/core/useRafFn/index.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/core/useRafFn/index.ts b/packages/core/useRafFn/index.ts index 016e4c8f100..47c1380e19b 100644 --- a/packages/core/useRafFn/index.ts +++ b/packages/core/useRafFn/index.ts @@ -24,7 +24,8 @@ export interface UseRafFnOptions extends ConfigurableWindow { */ immediate?: boolean /** - * The maximum delta value in milliseconds for a frame to be considered valid. + * The maximum frame per second to execute the function. + * Set to `undefined` to disable the limit. * * @default undefined */ @@ -46,7 +47,7 @@ export function useRafFn(fn: (args: UseRafFnCallbackArguments) => void, options: } = options const isActive = ref(false) - const interval: null | number = fpsLimit ? 1000 / fpsLimit : null + const intervalLimit = fpsLimit ? 1000 / fpsLimit : null let previousFrameTimestamp = 0 let rafId: null | number = null @@ -56,7 +57,7 @@ export function useRafFn(fn: (args: UseRafFnCallbackArguments) => void, options: const delta = timestamp - (previousFrameTimestamp || timestamp) - if (interval && delta < interval) { + if (intervalLimit && delta < intervalLimit) { rafId = window.requestAnimationFrame(loop) return }