technikhil314 · February 17, 2022 16:25
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">

 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Debounce and throttle simplified</title>
    <style>
        html {
            min-height: 100vh;
            font-size: 16px;
        }

        @media screen and (min-width: 600px) {
            .container {
                width: 500px;
            }
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            min-height: 100%;
            display: grid;
            place-items: center;
        }

        label {
            font-weight: bold;
            font-size: 0.95rem;
        }

        p,
        small,
        footer,
        form,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            text-align: center;
        }

        #value {
            border: 1px solid lightgray;
            min-height: 50px;
            max-width: 100%;
            padding: 5px;
            overflow-wrap: break-word;
            word-break: break-all;
        }
    </style>
 </head>

 <body>
    <main class="container">
        <h1>Throttle vs debounce simplified</h1>
        <p><small>PS: Keep any key on keyboard pressed for seeing better explanation</small></p>
        <form onsubmit="search(event)">
            <div>
                <h4>I am debounced</h4>
                <label for="debounce">Keep on typing here and I will tell you the value when you stop
                    typing</label><br>
                <input type="search" name="searchString" id="debounce" oninput="debouncedInput(event)" placeholder="" />
            </div>
            <hr>
            <div>
                <h4>I am throttled</h4>
                <label for="throttle">Keep on typing here and I will give you entered value after every certain
                    time interval</label><br>
                <input type="search" name="searchString" id="throttle" oninput="throttledInput(event)" placeholder="" />
            </div>
        </form>
        <p id="value"></p>
        <section>
            <code>
            <h3>Throttle</h3>
 <pre>
    function throttle(fun, timeduration) {
        let shouldCall = true;
        return (...args) => {
            if (shouldCall) {
                shouldCall = false;
                fun(...args);
                setTimeout(() => {
                    shouldCall = true;
                }, timeduration)
            }
        }
    }   
 </pre>
        </code>

            <code>
            <h3>Debounce</h3>
 <pre>
    function debounce(fun, timeduration) {
        let lastTimeoutId = 0
        return (...args) => {
            if (lastTimeoutId) {
                clearTimeout(lastTimeoutId);
            }
            lastTimeoutId = setTimeout(() => {
                fun(...args);
            }, timeduration)
        }
    }
 </pre>
        </code>
        </section>
        <footer>
            Made with &#10084; using javascript by &copy; <a href="https://technikhil314.netlify.app">technikhil314</a>
        </footer>
    </main>
    <script>
        const valueContaienr = document.getElementById("value")

        function throttle(fun, timeduration) {
            let shouldCall = true;
            return (...args) => {
                if (shouldCall) {
                    shouldCall = false;
                    fun(...args);
                    setTimeout(() => {
                        shouldCall = true;
                    }, timeduration)
                }
            }
        }

        function showValue(evt) {
            valueContaienr.innerText = `${evt.target.value}`;
        }

        const throttledInput = throttle(showValue, 500);

        function debounce(fun, timeduration) {
            let lastTimeoutId = 0
            return (...args) => {
                if (lastTimeoutId) {
                    clearTimeout(lastTimeoutId);
                }
                lastTimeoutId = setTimeout(() => {
                    fun(...args);
                }, timeduration)

            }
        }

        const debouncedInput = debounce(showValue, 500);
    </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Debounce and throttle simplified</title>
	<style>
	html {
	min-height: 100vh;
	font-size: 16px;
	}

	@media screen and (min-width: 600px) {
	.container {
	width: 500px;
	}
	}

	body {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	min-height: 100%;
	display: grid;
	place-items: center;
	}

	label {
	font-weight: bold;
	font-size: 0.95rem;
	}

	p,
	small,
	footer,
	form,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
	text-align: center;
	}

	#value {
	border: 1px solid lightgray;
	min-height: 50px;
	max-width: 100%;
	padding: 5px;
	overflow-wrap: break-word;
	word-break: break-all;
	}
	</style>
	</head>

	<body>
	<main class="container">
	<h1>Throttle vs debounce simplified</h1>
	<p><small>PS: Keep any key on keyboard pressed for seeing better explanation</small></p>
	<form onsubmit="search(event)">
	<div>
	<h4>I am debounced</h4>
	<label for="debounce">Keep on typing here and I will tell you the value when you stop
	typing</label><br>
	<input type="search" name="searchString" id="debounce" oninput="debouncedInput(event)" placeholder="" />
	</div>
	<hr>
	<div>
	<h4>I am throttled</h4>
	<label for="throttle">Keep on typing here and I will give you entered value after every certain
	time interval</label><br>
	<input type="search" name="searchString" id="throttle" oninput="throttledInput(event)" placeholder="" />
	</div>
	</form>
	<p id="value"></p>
	<section>
	<code>
	<h3>Throttle</h3>
	<pre>
	function throttle(fun, timeduration) {
	let shouldCall = true;
	return (...args) => {
	if (shouldCall) {
	shouldCall = false;
	fun(...args);
	setTimeout(() => {
	shouldCall = true;
	}, timeduration)
	}
	}
	}
	</pre>
	</code>

	<code>
	<h3>Debounce</h3>
	<pre>
	function debounce(fun, timeduration) {
	let lastTimeoutId = 0
	return (...args) => {
	if (lastTimeoutId) {
	clearTimeout(lastTimeoutId);
	}
	lastTimeoutId = setTimeout(() => {
	fun(...args);
	}, timeduration)
	}
	}
	</pre>
	</code>
	</section>
	<footer>
	Made with ❤ using javascript by © <a href="https://technikhil314.netlify.app">technikhil314</a>
	</footer>
	</main>
	<script>
	const valueContaienr = document.getElementById("value")

	function throttle(fun, timeduration) {
	let shouldCall = true;
	return (...args) => {
	if (shouldCall) {
	shouldCall = false;
	fun(...args);
	setTimeout(() => {
	shouldCall = true;
	}, timeduration)
	}
	}
	}

	function showValue(evt) {
	valueContaienr.innerText = `${evt.target.value}`;
	}

	const throttledInput = throttle(showValue, 500);

	function debounce(fun, timeduration) {
	let lastTimeoutId = 0
	return (...args) => {
	if (lastTimeoutId) {
	clearTimeout(lastTimeoutId);
	}
	lastTimeoutId = setTimeout(() => {
	fun(...args);
	}, timeduration)

	}
	}

	const debouncedInput = debounce(showValue, 500);
	</script>
	</body>

	</html>