remove section on debouncing with signals

Co-authored-by: Kristján Oddsson <[email protected]>

Author: keithamus

learn/techniques/signals-and-cancellation.md

@@ -262,112 +262,3 @@ class SearchInputElement extends HTMLInputElement {
   }
 }
 ```
-
-### Using signals to debounce or throttle methods
-
-_Debouncing_ or _Throttling_ are techniques whereby you delay an action for a fixed time period, discarding any events
-between them. These techniques are useful within UI as a way to delay an expensive operation like a network fetch or
-something CPU intensive like sorting many items. Consider a list filter input, that shows and hides thousands of items
-depending on if they match the text input.
-
-As debouncing & throttling are based on time, an `AbortController` isn't needed. Timeouts are such a common pattern that
-`AbortSignal.timeout()` can be used as a quick way to create a signal that will abort after some time has passed.
-
-Throttling and debouncing are variations on the same broader concept of limiting the times an action gets executed. If
-you're calling a function 10 times in a row, at 50ms intervals, a throttle of 100ms would ensure that the action is only
-run every 100ms, whereas a debounce would defer each call until there hadn't been one for more 100ms or more. To
-illustrate this concept we can look at a timeline:
-
-```
-              |-----|-----|-----|-----|-----|-----|-----|-----|
-Source        50    100         200   250         350   400
-throttle(100)       100         200               350
-debounce(100)             100               250               400
-```
-
-You can think of throttling as disregarding some calls but acting on others, whereas debounce waits for quiet periods.
-To throttle a method, you'll create the signal every time it is aborted, and execute the behavior when the timer has
-aborted:
-
-```js
-class ListFilterInputElement extends HTMLInputElement {
-  static define(tag = "list-filter-input") {
-    customElements.define(tag, this, { extends: "input" })
-  }
-
-  connectedCallback() {
-    this.addEventListener("input", this)
-  }
-
-  timeout = 100
-
-  #throttleSignal = null
-
-  handleEvent() {
-    // Don't do anything if the timer has yet to time out
-    if (this.#throttleSignal && !this.#throttleSignal.aborted) return
-
-    // The time has been aborted, so make a new timer for next time
-    this.#throttleSignal = AbortSignal.timeout(this.timeout)
-
-    // Execute the action
-    this.filer()
-  }
-
-  filter() {
-    for (const el of this.list.children) {
-      el.hidden = el.textContent.includes(this.input)
-    }
-  }
-}
-```
-
-_Debouncing_ would add a **delay** and so needs to act on the timeout happening, not some time after. Using the
-`aborted` event can queue up work for when the timer ends:
-
-```js
-class ListFilterInputElement extends HTMLInputElement {
-  static define(tag = "list-filter-input") {
-    customElements.define(tag, this, { extends: "input" })
-  }
-
-  connectedCallback() {
-    this.addEventListener("input", this)
-  }
-
-  timeout = 100
-
-  #debounceSignal = null
-
-  async handleEvent() {
-    // Don't do anything if the timer has run out
-    if (this.#debounceSignal?.aborted) return
-
-    // Renew the signal
-    this.#debounceSignal = AbortSignal.timeout(this.timeout)
-
-    // Schedule work for after debouncement
-    this.#debounceSignal.addEventListener(
-      "abort",
-      (event) => {
-        // Check to see that new work hasn't been scheduled
-        if (event.target === this.#debounceSignal) {
-          // Clear out the signal so new work can be schedule
-          this.#debounceSignal = null
-
-          // Execute the action
-          this.filter()
-        }
-      },
-      { once: true }
-    )
-  }
-
-  filter() {
-    for (const el of this.list.children) {
-      el.hidden = el.textContent.includes(this.input)
-    }
-  }
-}
-```
-