flow.cleanup()
Add cleanup handlers using .cleanup(), to be run when a flow is stopped. It is mostly intended for when manually creating Flow objects.
Syntax
flow.cleanup(callback);
Parameters
- callback
- A function to be run when the flow is stopped. It receives no arguments.
Return value
The same Flow object the method was called on, allowing for method chaining.
Details
When the flow in question stops (through e.g. .until(), .stop(), .once() or otherwise), the cleanup callbacks are fired in same order as they were attached. If the same function reference is passed to multiple .cleanup() calls, then they are called multiple times.
Examples
Let's build a function that turns the native matchMedia() into a Flow object. We'll pass the function a media query as a string (such as '(width < 800px)'), and the returned flow triggers whenever the media query changes state, i.e. activates or deactivates. This needs to be read with an event listener, for which we could use when(), but let's refrain from doing so for the sake of the example.
function mediaQuery(query){
const controller = new AbortController();
const { signal } = controller;
const mediaQueryList = window.matchMedia(query);
return new Flow(trigger => {
mediaQueryList.addEventListener('change', () => {
trigger(mediaQueryList.matches);
}, { signal });
}).cleanup(() => {
controller.abort();
});
}
Here we use an AbortController with its AbortSignal to remove the event listener inside the .cleanup() method. This makes sure that whenever the flow is stopped (for any reason) then we're not creating a memory leak by having a stopped flow continuing to attempt to trigger.
Usage notes
The .cleanup() method is relatively low-level, and mostly useful when manually creating flows. When creating a flow inside a monitored context of type "undo", then a .cleanup() method is equivalent to a monitor.add('undo', …) call.
See also