Advanced JavaScript: A Deep Dive into the Core Concepts

A quick guide to Debounce in JavaScript

Board Infinity
Board Infinity
A quick guide to Debounce in JavaScript

    Javascript vs Typescript: What is the Difference?

    Understanding Array Slice() in JavaScript

    JavaScript: Array Filter() Method

    JavaScript array map() method

    Encoding and Decoding URL in JavaScript: How?

    JavaScript Fetch API Explanation

    A quick guide to Debounce in JavaScript

    Promise in JavaScript

    What is Promise.all in JavaScript?

    Javascript Async and Await Function

    A quick guide to async/await in Javascript

    10 Best JavaScript Frameworks to Use in 2023

    Trends and Tools of JavaScript in 2022

    JavaScript Interview Questions and Answers (2023)

Introduction

JavaScript uses the debouncing technique to speed up browser performance. Some features on a web page could require laborious computations. The fact that JavaScript is a single-threaded language means that if this type of technique is used frequently, it could have a significant impact on the browser's performance. Debouncing is a programming method that ensures time-consuming tasks do not result in performance drops for the website. In other words, when called, the Debounce methods are not executed. Instead, they delay execution for a set amount of time. The previous process is stopped and the timer is reset when we call the same process again.

Example:

<html>
<body>
<button id="debounce">
    Debounce
</button>
<script>
var button = document.getElementById("debounce");
const debounce = (func, delay) => {
    let debounceTimer
    return function() {
        const context = this
        const args = arguments
            clearTimeout(debounceTimer)
                debounceTimer
            = setTimeout(() => func.apply(context, args), delay)
    }
}
button.addEventListener('click', debounce(function() {
        alert("Hello\nI'm executed once every three seconds no matter how many times you" + " hit the debounce button")
                        }, 3000));
</script>
</body>
</html>

write your code here: Coding Playground

Output


Explanation

The debounce function is called by an event listener that is connected to the button. There are two parameters given to the debounce function: a function and a number. Create a variable named debounce timer, which purpose is to call the method after a delay of 'delay' milliseconds.The debounce function is called after the delay if the debounce button is only clicked once. The first delay is cleared, though, and a new delay timer is begun if the debounce button is clicked once, then again just before the delay expires. To do this, the clearTimeout function is employed.

Debouncing's fundamental principle is to:

1. Start with a timeout of 0.

2. Reset the timer to the desired delay in case the debounced function is called once more.

3. Call the debounced function in the event of a timeout.

Every time a debounce function is called, the timer is reset and the call is delayed.

Application:

Debouncing can be used to implement suggestive text, in this case the text is proposed after we wait a brief period for the user to cease typing. As a result, we give each keystroke a few seconds before offering a suggestion. On websites that load content while the user scrolls, like Facebook and Twitter, debouncing is frequently employed. If the scroll event is fired too frequently, it will affect performance because there are so many movies and photographs. Debouncing is therefore required in the scroll situation.

Conclusion:

We learned about debouncing ideas in this post, along with how they are applied in the real world. JavaScript and HTML were also used to put the ideas into practice.