[Tutorial] show using AbortController for simpler cleanup with event listeners
NullVoxPopuli opened this issue · comments
NullVoxPopuli commented
From @sukima: https://tritarget.org/#examples%2Fpage-unload-management%2Fevent-handler-abort
Instead of:
@action setupWindowListener() {
/* setup */
window.addEventListener('beforeunload', this.handleUnload)
registerDestructor(this, () => {
/* teardown */
window.removeEventListener('beforeunload', this.handleUnload)
});
}
Maybe this?
@action setupWindowListener() {
/* setup */
let cleanup = new AbortController();
let { signal } = cleanup;
window.addEventListener('beforeunload', this.handleUnload, { signal })
/* tear down */
registerDestructor(cleanup, cleanup.abort);
}
Devin Weaver commented
I think registerDestructor
needs this
as a first parameter. I believe it needs this to have it participate in the component tear down right?
@action setupWindowListener() {
/* setup */
let cleanup = new AbortController();
let { signal } = cleanup;
window.addEventListener('beforeunload', this.handleUnload, { signal })
/* tear down */
registerDestructor(this, () => cleanup.abort);
}
Also in this simple example you can get away with an extra object creation:
@action setupWindowListener() {
/* setup */
let cleanup = new AbortController();
window.addEventListener('beforeunload', this.handleUnload, cleanup)
/* tear down */
registerDestructor(this, () => cleanup.abort);
}