auto-complete-element icon indicating copy to clipboard operation
auto-complete-element copied to clipboard

Use abortcontroller to simplify connectedCallback

Open keithamus opened this issue 4 years ago • 0 comments

Per https://github.com/github/auto-complete-element/pull/53#discussion_r761014561, we register many event handlers like addEventlistener('foo', this.bar = this.bar.bind(bar)), but rather than calling function bind we can use handleEvent and rather than calling removeEventListener a bunch, we can store an abort controller per-instance (e.g. with a private field) and abort during disconnectedCallback.

The pattern would look as follows:

class MyElement extends HTMElement {
  #ctl = new AbortController()

  connectedCallback() {
    this.input.addEventListener('foo', this, { signal: this.#ctl.signal })
    // many more events here...
  }

  handleEvent(event) {
    if (event.type === 'foo' && event.currentTarget === this.input) {
      // do things
    }
  }

  disconnectedCallback() {
    this.#ctl.abort()
  }

}

keithamus avatar Dec 02 '21 16:12 keithamus