From c0a9d7465d2161f8a52206251baf1eb7cab85283 Mon Sep 17 00:00:00 2001 From: DarkWiiPlayer Date: Tue, 8 Feb 2022 14:50:32 +0100 Subject: [PATCH] Add debounce.js --- debounce.js | 10 ++++++++++ index.html | 16 +++++++++++++++- page/codeblock.js | 11 ++++++++--- page/debounce.html | 41 +++++++++++++++++++++++++++++++++++++++++ page/style.css | 8 +++++++- 5 files changed, 81 insertions(+), 5 deletions(-) create mode 100644 debounce.js create mode 100644 page/debounce.html diff --git a/debounce.js b/debounce.js new file mode 100644 index 0000000..57637ee --- /dev/null +++ b/debounce.js @@ -0,0 +1,10 @@ +export default (action, delay=1e3) => { + let timeout + return (...args) => { + if (timeout) clearTimeout(timeout) + timeout = setTimeout(() => { + timeout = undefined + action(...args) + }, delay) + } +} diff --git a/index.html b/index.html index d74cb7a..b1accdc 100644 --- a/index.html +++ b/index.html @@ -31,5 +31,19 @@
-

Listener

+

Debounce

+

+ Debounces data like user input or events that can occur in a burst. +

+ +

+

Code Sample:

+ + import debounce from 'debounce.js' + + input.addEventListener("change", debounce(event => update(input.value))) + +

+ + Read More
diff --git a/page/codeblock.js b/page/codeblock.js index 63ead23..7b2abfc 100644 --- a/page/codeblock.js +++ b/page/codeblock.js @@ -10,9 +10,14 @@ hljs.registerLanguage('javascript', javascript); const escapes = { ">": ">" } class CodeBlock extends HTMLElement { connectedCallback() { - let content = this.innerHTML.replace(/^\s*\n/, "").replace(/\n\s*$/, "") - let prefix = new RegExp(`${content.match(/^\t*/)}`, "g") - content = content.replace(prefix, "").replace(/&.*;/g, str => escapes[str] ?? str) + let content = this.innerHTML + .replace(/^\s*\n/, "") + .replace(/\n\s*$/, "") + let prefix = new RegExp(`(? escapes[str] ?? str) this.replaceChildren(html.pre(html.code(template(hljs.highlight(content, {language: 'javascript'}).value)))) } } diff --git a/page/debounce.html b/page/debounce.html new file mode 100644 index 0000000..fab7a7a --- /dev/null +++ b/page/debounce.html @@ -0,0 +1,41 @@ + + + + + +

debounce.js

+ +import debounce from 'debounce.js' + +
+

Description

+

+ Utility module for debouncing user-interactions (or any other events). +

+

+ Its main application are cases where expensive operations like updating or querying data are performed in response to some event like a user typing into a search box. +

+
+ +
debounce
+
target ⟶ wrapper
+
target, timeout ⟶ wrapper
+
+
+ A decorator function that takes a target function and returns a wrapper that will only call the target after a set timeout expires. + Repeatedly calling the wrapper while the timeout is running will reset the timeout without calling the target function. +
+
+ + +

Example

+ + + const update = value => expensive_operation(value) + + input.addEventListener("change", debounce(event => update(input.value))) + + + This code will debounce the update event handler of an input element, calling the update + function only after no changes have been made for at least one second. +
diff --git a/page/style.css b/page/style.css index ffa8999..4ef675d 100644 --- a/page/style.css +++ b/page/style.css @@ -107,7 +107,13 @@ dl>*+* { margin-top: .4em; } code { font-size: 1.1em; } dl>code dt, dl>code dd { all: unset;} -dl>code dt::after { content: ' : ';} +dl>code dt::after { content: '\00A0:\00A0';} + +dl>code { + display: grid; + grid-template-columns: auto 1fr; +} +dl>code>dt~dd { grid-column: 2/2; } .columns { display: grid;