diff --git a/examples/react/src/App.tsx b/examples/react/src/App.tsx index e0d36ec..35d6cf7 100644 --- a/examples/react/src/App.tsx +++ b/examples/react/src/App.tsx @@ -106,7 +106,7 @@ const UI = ({ scrollYRef: RefObject }) => { const mainLoopRef = useRef(null) - const MainLoopThrottledRef = useRef(null) + const mainLoopThrottledRef = useRef(null) const [joystickMode, setJoystickMode] = useState<'follow' | 'origin'>('follow') const [count, setCount] = useState(0) @@ -125,7 +125,7 @@ const UI = ({ useMainLoop( ({ elapsed, callbackCount }) => { - MainLoopThrottledRef.current!.textContent = `${String(Math.round(elapsed * 1000))} - Counter: ${count} - CBs: ${callbackCount}` + mainLoopThrottledRef.current!.textContent = `${String(Math.round(elapsed * 1000))} - Counter: ${count} - CBs: ${callbackCount}` }, { throttle: 100 }, ) @@ -299,7 +299,7 @@ const UI = ({ useMainLoop:
- useMainLoop (throttled): + useMainLoop (throt.):
diff --git a/packages/core/src/main-loop.ts b/packages/core/src/main-loop.ts index 1ac8fc2..0f12084 100644 --- a/packages/core/src/main-loop.ts +++ b/packages/core/src/main-loop.ts @@ -12,9 +12,16 @@ export type MainLoopEffectOptions = { type StageNumber = number +type State = { + time: number + delta: number + elapsed: number + callbackCount: number +} + const callbacks = new Map>() const callbackLastExecutions = new WeakMap() -const state = { time: 0, delta: 0, elapsed: 0, callbackCount: 0 } +const state: State = { time: 0, delta: 0, elapsed: 0, callbackCount: 0 } let previousTime = performance.now() let running = false let animationFrameId: number | null = null @@ -22,14 +29,14 @@ let animationFrameId: number | null = null const mainLoop = (time: number) => { if (!running) return + state.time = time + let callbackCount = 0 for (const callbacksSet of callbacks.values()) { callbackCount += callbacksSet.size } state.callbackCount = callbackCount - state.time = time - Array.from(callbacks.keys()) .sort((a, b) => a - b) .forEach(stage => { @@ -50,18 +57,12 @@ export const addMainLoopEffect = ( callback: MainLoopEffectCallback, options?: MainLoopEffectOptions, ) => { - const throttledCallback = (state: { - time: number - delta: number - elapsed: number - callbackCount: number - }) => { - const now = performance.now() + const throttledCallback = (state: State) => { const lastExecution = callbackLastExecutions.get(callback) || 0 const throttleInterval = options?.throttle || 0 - if (now - lastExecution >= throttleInterval) { - callbackLastExecutions.set(callback, now) + if (state.time - lastExecution >= throttleInterval) { + callbackLastExecutions.set(callback, state.time) state.delta = (state.time - previousTime) / 1000 state.elapsed += state.delta callback(state)