- From: Michelle Antonello <notifications@github.com>
- Date: Sun, 03 Apr 2022 23:45:59 -0700
- To: whatwg/dom <dom@noreply.github.com>
- Cc: Subscribed <subscribed@noreply.github.com>
- Message-ID: <whatwg/dom/issues/1070@github.com>
Add EventListener Sub Flags EventListeners allow the addition of a preset delay before firing the callback parameter (event throttling). However to reduce bandwith when polling a remote server, and because the number of keystrokes-, scrolling-, mousemove- or resize events is non deterministic, it is more useful to "batch" events and fire the callback once. This may be so common in use today it may be beneficial to add it to the standard REFERENCE Adding Javascript Debounce And Throttling Controls [ https://youtu.be/cjIswDCKgu0 ] TC39 AddEventListener Sub Flags [ https://es.discourse.group/t/add-eventlistener-sub-flags/1277 ] ```javascript // CURRENT // const input = document.getElementById("input") const defaultText = document.getElementById("defaultText") const debouncedText = document.getElementById("debouncedText") const throttleText = document.getElementById("throttleText") const mouseEvents = document.getElementById("mouseEvents") function debounce(cb, delay = 1000){ let timeout = null return (...args) => { clearTimeout(timeout) timeout = setTimeout(() => { cb(...args) }, delay) } } const updateDebouncedText = debounce(text => { defaultText.textContent = text }, 250) function throttle(cb, delay = 1000){ let shouldWait = false let waitingArgs = null const timeoutFunc = () => { if(shouldWait == null){ shouldWait = false } else { cb(...waitingArgs) waitingArgs = null setTimeout(timeoutFunc, delay) } } return (...args) => { if (shouldWait){ waitingArgs = args return } cb(...args) shouldWait = true setTimeout(timeoutFunc, delay) } } const updateThrottleText = throttle(text => { defaultText.textContent = text }, 250) input.addEventListener("input", e => { defaultText.textContent = e.target.value updateDebouncedText(e.target.value) updateThrottleText(e.target.value) }, false) // NEW // input.addEventListener("post.batch.input", e => { debouncedText.textContent = e.target.value }, 250) // fire callback on input event[s], batched as a single event, during delay (ie "a","b" == "ab") // input.addEventListener("pre.throttle.input", e => { debouncedText.textContent = e.target.value }, 250) // fire callback only on last event received during delay (ie "a","b" == "b") // input.addEventListener("pre.throttle.mousemove", e => { mouseEvents.textContent = e.target.value }, 250) // fire callback only on last event received during delay (ie "[100,30]","[-50,30]" == "[-50,30]") // ``` -- Reply to this email directly or view it on GitHub: https://github.com/whatwg/dom/issues/1070 You are receiving this because you are subscribed to this thread. Message ID: <whatwg/dom/issues/1070@github.com>
Received on Monday, 4 April 2022 06:46:11 UTC