diff --git a/index.ts b/index.ts index c14f276..e3cb1e6 100644 --- a/index.ts +++ b/index.ts @@ -5,8 +5,3 @@ export { default as yieldOrContinue } from './src/yieldOrContinue' export { default as yieldControl } from './src/yieldControl' export { default as isTimeToYield } from './src/isTimeToYield' export type { default as SchedulingStrategy } from './src/SchedulingStrategy' - -// utility -export { default as queueTask } from './src/utils/queueTask' -export { default as withResolvers } from './src/utils/withResolvers' -export { default as requestAfterFrame } from './src/utils/requestAfterFrame' diff --git a/playground/index.html b/playground/index.html index 88091c7..8016bda 100644 --- a/playground/index.html +++ b/playground/index.html @@ -53,7 +53,7 @@
others: - +
diff --git a/playground/playground.ts b/playground/playground.ts index fa6f747..8255e82 100644 --- a/playground/playground.ts +++ b/playground/playground.ts @@ -1,11 +1,6 @@ -import { - isTimeToYield, - queueTask, - SchedulingStrategy, - withResolvers, - yieldOrContinue, -} from '../index' +import { isTimeToYield, SchedulingStrategy, withResolvers, yieldOrContinue } from '../index' import simulateWork from './utils/simulateWork' +import waitNextTask from '../src/utils/waitNextTask' document.querySelector('#run-interactive')!.addEventListener('click', () => { run('interactive') @@ -45,7 +40,7 @@ document.querySelector('#post-task-vs-yield-or-continue')!.addEventListener('cli postTaskVsYieldOrContinue() }) document.querySelector('#queue-task')!.addEventListener('click', () => { - runQueueTask() + runWaitNextTask() }) async function run(strategy: SchedulingStrategy, time: number = 1000) { @@ -80,10 +75,10 @@ async function runPostTask(priority: 'user-blocking' | 'user-visible' | 'backgro } } -async function runQueueTask(time: number = 1000) { +async function runWaitNextTask(time: number = 1000) { const start = Date.now() while (Date.now() - start < time) { - await new Promise((resolve) => queueTask(resolve)) + await waitNextTask() simulateWork() } } @@ -102,10 +97,10 @@ async function postTaskVsYieldOrContinue() { const start = performance.now() let count = 0 while (performance.now() - start < 1000) { - await new Promise((resolve) => queueTask(resolve)) + await waitNextTask() count++ } - console.log(count.toString(), '→ queueTask()') + console.log(count.toString(), '→ waitNextTask()') } { const start = performance.now() diff --git a/readme.md b/readme.md index 0c483e1..f952b04 100644 --- a/readme.md +++ b/readme.md @@ -83,14 +83,6 @@ async function findInFiles(query: string) { } ``` -#### `requestAfterFrame(callback)` - -_This is a utility function, most people don't need to use it._ The same way `requestAnimationFrame()` queues a `callback` to be executed just before a frame is rendered `requestAfterFrame()` is called just after a frame is rendered. - -#### `queueTask(callback)` - -_This is a utility function, most people don't need to use it._ The same way `queueMicrotask()` queues a `callback` to be executed in the end of the current microtask, `queueTask()` queues the task for the next task. You learn more at [here](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide#tasks_vs._microtasks). - ### More complex scenarios The library has two more functions available: diff --git a/src/frameTracker.ts b/src/frameTracker.ts index ca10b4a..df5c576 100644 --- a/src/frameTracker.ts +++ b/src/frameTracker.ts @@ -1,5 +1,5 @@ import withResolvers, { PromiseWithResolvers } from './utils/withResolvers' -import { queueTask } from '../index' +import waitNextTask from './utils/waitNextTask' class FrameTracker { #timeoutId?: number @@ -10,13 +10,9 @@ class FrameTracker { this.#deferred = withResolvers() } - async waitAnimationFrame(): Promise { - return this.#deferred.promise - } - async waitAfterFrame(): Promise { await this.#deferred.promise - await new Promise((resolve) => queueTask(resolve)) + await waitNextTask() } start(): void { diff --git a/src/utils/queueTask.ts b/src/utils/queueTask.ts deleted file mode 100644 index 42a423d..0000000 --- a/src/utils/queueTask.ts +++ /dev/null @@ -1,23 +0,0 @@ -const callbacks: (() => void)[] = [] - -// same as queueMicrotask() but for tasks -// https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide#tasks_vs._microtasks -// https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide/In_depth#tasks_vs._microtasks -export default function queueTask(callback: () => void): void { - if (callbacks.length === 0) { - const channel = new MessageChannel() - channel.port2.postMessage(undefined) - // eslint-disable-next-line unicorn/prefer-add-event-listener - channel.port1.onmessage = (): void => { - const callbacksCopy = [...callbacks] - - callbacks.splice(0, callbacks.length) - - for (const callback of callbacksCopy) { - callback() - } - } - } - - callbacks.push(callback) -} diff --git a/src/utils/requestAfterFrame.ts b/src/utils/requestAfterFrame.ts deleted file mode 100644 index 7e0d397..0000000 --- a/src/utils/requestAfterFrame.ts +++ /dev/null @@ -1,13 +0,0 @@ -import queueTask from './queueTask' - -/** - * Calls the callback after the browser renders the next frame. - * Compared to requestAnimationFrame() that calls the callback before the next frame. - * Inspired by: https://github.com/andrewiggins/afterframe - * @param callback - */ -export default function requestAfterFrame(callback: () => void): void { - requestAnimationFrame(() => { - queueTask(callback) - }) -}