From c0a9d7465d2161f8a52206251baf1eb7cab85283 Mon Sep 17 00:00:00 2001
From: DarkWiiPlayer <darkwiiplayer@hotmail.com>
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 @@
 </section>
 
 <section>
-	<h2>Listener</h2>
+	<h2>Debounce</h2>
+	<p>
+		Debounces data like user input or events that can occur in a burst.
+	</p>
+
+	<p>
+		<h3 class="all-unset"><b>Code Sample</b>:</h3>
+		<code-block>
+			import debounce from 'debounce.js'
+
+			input.addEventListener("change", debounce(event =&gt; update(input.value)))
+		</code-block>
+	</p>
+
+	<a class="button" href="page/debounce.html">Read More</a>
 </section>
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 = { "&gt;": ">" }
 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(`(?<![^\n])${content.match(/^\t*/)}`, "g")
+		console.log(prefix)
+		content = content
+			.replace(prefix, "")
+			.replace(/&[a-z]+;/g, str => 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 @@
+<link rel="stylesheet" href="style.css">
+
+<script type="module" src="codeblock.js"></script>
+<script type="module" src="filesize.js"></script>
+
+<h1 class="js module">debounce.js</h1>
+
+<code-block>import debounce from 'debounce.js'</code-block>
+
+<section>
+	<h2>Description</h2>
+	<p>
+		Utility module for debouncing user-interactions (or any other events).
+	</p>
+	<p>
+		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.
+	</p>
+	<dl>
+		<code>
+			<dt>debounce</dt>
+			<dd>target &xrarr; wrapper</dd>
+			<dd>target, timeout &xrarr; wrapper</dd>
+		</code>
+		<dd>
+			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.
+		</dd>
+	</dl>
+
+
+	<h2>Example</h2>
+
+	<code-block>
+		const update = value =&gt; expensive_operation(value)
+
+		input.addEventListener("change", debounce(event =&gt; update(input.value)))
+	</code-block>
+
+	This code will debounce the update event handler of an input element, calling the <code>update</code>
+	function only after no changes have been made for at least one second.
+</section>
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;