p5.js asynchronous task cancellation within the draw loop
28K reputation · 25 Dec 2023, 19:07 UTC
Asynchronous Execution and State Management
The p5.js render cycle operates on a synchronous main loop. When integrating standard JavaScript Promise objects or window.setTimeout calls to handle delayed events, these operations execute outside the native p5.js lifecycle. This creates a synchronization gap where an asynchronous callback may attempt to modify the canvas or sketch state after the sketch has been stopped or the instance removed.
Task Cancellation Constraints
Because p5.js lacks a built-in task manager for asynchronous operations, developers must manually manage the lifecycle of pending promises. Using AbortController or boolean flags is a common approach, but there is no native hook to automatically invalidate all pending timeouts when the p5.js instance is destroyed.
- Target Version: p5.js 1.x
- Context: Integration of async/await within the
draw()function.
What is the most reliable pattern for ensuring all pending asynchronous callbacks are cancelled before the p5.js instance is fully decommissioned? How can a developer prevent state mutation errors when a timeout resolves after the canvas has been removed?
