Forem: jayakrishnan TN

The Effect of Debouncing in JavaScript Event handlers

jayakrishnan TN — Wed, 08 Jul 2020 13:49:56 +0000

Did every keypress in the search bar need an API call? how a scroll or resize event can be optimized? Such questions are common in platforms like StackOverflow, GitHub, etc.

Did you guys read the same paragraph that I wrote above this line anywhere?

All Javascript apps need event throttling!!!

jayakrishnan TN ・ Jun 19 ・ 4 min read

#javascript #webdev #coding #todayilearned

If you read my previous article about Event Throttling, you can see that the article also starts with the same paragraph. Why I provide the same paragraph for both? That's also a question..Yeah!! Because these two articles/ concepts that point to the single source of the event optimization.

Debouncing and Throttling techniques are used to limit the number of times a function can execute.

From my last article, the concept of providing a throttling function in an event handler is really simple..ah?

In throttling technique, timerId is the key and in Debouncing ClearTimeout function is the key factor.

The concept is really simple:

If an event trigger occurs repeatedly in a time period and we need the result only after a cooling period after the event triggers, then we need Debouncing.

For example, a typo master is trying to search for something in amazon using the top search bar in the web application. He doesn't look into the autocomplete option provided by amazon ( UX is always the king..!🔥🔥🔥) and he waits for the result only after stop typing. So from a developer perspective, we need to call the AutoComplete suggestion API only after he/she stops typing.

There is only one question left to solve the issue. How we Identify the user stopped typing and wait for API response?

Solution

Set a cooling period for your event handler. For each event trigger, start the cooling period and if there were any more event triggers occur, then clear the first cooling period and start a new one. If the cooling period is successfully passed then only trigger the API call.

Does that mean we are always clear out the event that occurs repeatedly in the cooling time span.right? Let's come to the coding phase...

The sample index.html file is:


<div id= "search-section">
    <input type= "text" placeholder= "Search here" id= "search-input" />
</div>

<p>No of times event fired without debouncing</p>
<p id='show-without-debounce-count'></p>

<p>No of times debouncing executed the method</p>
<p id="debounc-count"></p>

<script src= "script.js" />

the javascript script.js file is:


const searchSection = document.getElementById('search-section');
const searchInput = document.getElementById('search-input');
let timerId;

// This represents a very heavy method. Which takes a lot of time to execute
function makeAPICall() {
    let debounceCountDOM = document.getElementById('debounc-count');

    let debounceCount = debounceCountDOM.innerHTML || 0;
    debounceCountDOM.innerHTML = parseInt(debounceCount) + 1;
    console.log('debounce count', debounceCount);

}

function debounceFunction(func, delay) {

    //Cancel the current setTimeOut execution 
    clearTimeout(timerId);

    //Execute the function func after delay time
    timerId = setTimeout(func, delay);
}

// Event listener on the search input tag
searchInput.addEventListener('keypress', function() {
    let normalCountDOM = document.getElementById('show-without-debounce-count');
    let normalCount = normalCountDOM.innerHTML || 0;

    normalCount = parseInt(normalCount) + 1;
    normalCountDOM.innerHTML = normalCount;

    console.log('normal count', normalCount);

    debounceFunction(makeAPICall, 200);
});

Result

Explanation

I think the code says all the things...Yeah? Let me give a shot also.

Here the debounceFunction will call the makeAPICall function only after provided delay of 200 milliseconds.

Inside debounceFunction, each time a new event occurs before completing the previous one, it will clear the timeId with clearTimeout function and set a new one with setTimeout function. so only when no events are repeated in the delay time span, the setTimeout will finish it's execution properly. then only the makeAPICall function will execute.

Conclusion

Nothing more..nothing less...Debouncing is cool...
We can optimize the no of event triggers with a cooling period for search events, resize events, Mouse moves events, etc.

Further Discussion on this topic in the comment box is appreciated 🏄‍♂️⛹️‍♂️🚴‍♀️🤩🤗!!!.

All Javascript apps need event throttling!!!

jayakrishnan TN — Fri, 19 Jun 2020 10:18:39 +0000

Did every keypress in the search bar need an API call? how scroll or resize event can be optimized? Such questions are common in platforms like StackOverflow, GitHub, etc.

Google these questions only when we are at the middest of an optimization phase of our application or we are really be sucked at a never-ending API call loop. am I right?

All the google searches are pointing to two major terms in Javascript programming - Throttling and Debouncing

Did we need to learn these? yes! Almost all web applications need these techniques to optimize performance.

Simply Debouncing and Throttling techniques are used to limit the number of times a function can execute.

Consider a search bar in a shopping cart application, when we type each letter in the field, each time an API call is requested to the server. When we look into the network section in the browser,
there seems to be a number of pending API calls in the list.

Think about it? is this ok for your application?? Really Nope!!!
then the question arises - how to reduce the API calls in a search bar...Yes!! At last, you google it and all the search results repeatedly say- use Throttling and Debouncing buddy...!!!

Event Throttling

Throttling is a technique in which no matter how many times users fires the event, the attached function will be executed only at a regular interval.

Actually Throttling is a simple technique , that we can create using the setTimeout function in Javascript.

setTimeout function

setTimeout is a webAPI provided by the browser and used as a scheduling function in Javascript. Using this function we can delay an event or function call to a period of time.

The syntax is:

let timerId = setTimeout(callbackFunction, timeToDelay);

Here the callbackFunction defines the code that needs to be executed after the timeToDelay period of time.

The setTimeout function will return a timerId, which is a positive integer value to uniquely identify the timer created by the call to setTimeout.This value can be passed to clearTimeout to can the timeout.

Remember, the timerId is the key point in throttling.

//Example of setTimeout
const showMessage = function() {
console.log('show this message after 2 seconds');
};

let timerId = setTimeout(showMessage, 2000); //the showMessage function will call after 2000 ms and show the message.

Implementation

Throttling will fires the function call attached with it, once in an interval.For the below given example the scroll event will be counted with and without throttling implementation.

Without throttling

The sample index.html file is:

<head>
 <style>
        div {
            border: 1px  solid  black;
            width: 300px;
            height: 200px;
            overflow: scroll;
        }
    </style>  
</head>

<body>
    <div  id="div-body">
        <p style="background-color: red; height: 700px">This is line 1</p>
        <p style="background-color: blue; height: 700px">This is line 2</p>
        <p style="background-color: green; height: 700px">This is line 3</p>
        <p style="background-color: yellow; height: 700px">This is line 4</p>
    </div>

    <p>No of times event fired</p>
    <p id='show-api-call-count'></p>

    <script src= "script.js" />
</body>

the javascript script.js file is:


let timerId, eventCallCount;
const divBodyDom = document.getElementById('div-body');

divBodyDom.addEventListener('scroll', function() {
    const eventCallCountDom = document.getElementById('show-api-call-count');
    eventCallCount= eventCallCount|| 0;

    eventCallCount+= 1;
    eventCallCountDom.innerHTML = eventCallCount;

});

RESULT:

Using Throttling

The sample index.html file is:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Throttling in Javascript</title>

    <style>
        div {
            border: 1px  solid  black;
            width: 300px;
            height: 200px;
            overflow: scroll;
        }
    </style>

</head>
<body>
    <div  id="div-body">
        <p style="background-color: red; height: 700px">This is line 1</p>
        <p style="background-color: blue; height: 700px">This is line 2</p>
        <p style="background-color: green; height: 700px">This is line 3</p>
        <p style="background-color: yellow; height: 700px">This is line 4</p>
    </div>

    <p>No of times event fired</p>
    <p id='show-api-call-count'></p>

    <p>No of times throttling executed the method</p>
    <p id="debounc-count"></p>

    <script src= "script.js" />
</body>
</html>

the javascript script.js file is:

let timerId, apiCallCount, throttlingDomCount;
const divBodyDom = document.getElementById('div-body');

function makeAPICall() {
    const throttlingDom = document.getElementById('debounc-count');

    throttlingDomCount = throttlingDomCount || 0;
    throttlingDomCount += 1;

    throttlingDom.innerHTML = throttlingDomCount;

}

function throttleFunction(func, delay) {
    if(timerId) {
        return;
    }

    timerId = setTimeout(function() {
        func();
        timerId = undefined;
    }, delay);
}

divBodyDom.addEventListener('scroll', function() {
    const apiCallCountDom = document.getElementById('show-api-call-count');
    apiCallCount = apiCallCount || 0;

    apiCallCount = parseInt(apiCallCount) + 1;
    apiCallCountDom.innerHTML = apiCallCount;

    throttleFunction(makeAPICall, 200);
});

Result:

Explanation

Here the throttle() function will handle the makeAPICall() and pass an interval value as 200.
so the throttle() will make an arrangement to trigger the makeAPICall() function in an interval of 200ms.

Inside the throttle() function the main point is the timerId.

If the timerId is undefined, then the setTimeout function will trigger and timerId returns.

If the timerId is a valid one, that means one setTimeout function is pending to complete.right? so it will return without doing anything. That means the makeAPICall() function will be executed only when the timerId is set. That occurs only after completion of each setTimeout function.

By setting the passing delay as the delay parameter of the setTimeout function, we can execute the makeAPICall() function in a regular interval of 200ms.

Also, don't forget to reset the timerId to undefined, then only the next event trigger will do as our wish.

Really simple..Yeah??

Conclusion

The developer can control the execution of events with a time interval for like, window resize, repeated button click, speedy search type, mouse move event, etc using Event throttling concept.

How can we do some action only after the completion of an event? - Using Debouncing(). Wait for my next blog!!!

The only blog needed to understand var, let and const

jayakrishnan TN — Mon, 25 May 2020 14:03:58 +0000

Common thing that all javascript programmers search on the web more than once in your career!!!am I right?

It's pretty cool to understand the javascript variable declaration before the era of big gun ES6! The one and only one king - var keyword. On introducing ES6 we have another couple of keywords to implement the variable declaration- let and const.

The best way to understand these keywords by comparing them based on 3 features.
1. Scope of variable
2. Redeclaration
3. Hoisting

Scope of variable

When we declare a variable in JS, the lifetime of the variable in our code is defined as the scope of the variable.

using var keyword

The variable created with var keyword has a scope of current execution context. That means, if the variable is declared outside of all the functions and block of codes, it's scope is global otherwise local to the function or block of codes.

The one important thing is that if the scope of the variable is global it can be accessed with the window object(only in the case of var keyword!).

//  Global Scope
 var varVariable = "John Doe";
 console.log(varVariable);  // Output: "John Doe"
 console.log(window.varVariable);  //  Output:  "John Doe"

//  Local Scope to the function
function() {
  var varVariable = "John Doe"; 
  console.log(varVariable);  // Output: "John Doe"
}
 console.log(varVariable);  // Output: undefined
 console.log(window.varVariable);  //  Output:  undefined

using let keyword

The let keyword variables have only blocked scope in code execution. That means if a variable declared with let outside of all the functions and block of codes, it's scope is limited to the end of the execution of the code. Otherwise scope is limited to the block or function in which the variable is declared.

Are you confused about the above paragraph? both the var and let keywords are similar when declaring outside of all functions? Maybe you are confused!!

If your answer is a YES, then go to the Hoisting section of this article and read about the let keyword. Then you get a better understanding of the difference. The let and var keyword are almost similar...

//  Variable scope is available to the end of the execution of the code.
 let letVariable = "John Doe";
 console.log(letVariable);  // Output: "John Doe"
 console.log(window.letVariable);  //  Output:  undefined

//  Block Scope to the function
function() {
  let letVariable = "John Doe"; 
  console.log(letVariable);  // Output: "John Doe"
}
 console.log(letVariable);  // Output: undefined
 console.log(window.letVariable);  //  Output:  undefined

using const keyword

const is a new one for declaring immutable variables in Javascript. that means variable that doesn't change their value when the code execution progress through line by line.

Similar to let keyword, const also have blocked scope.

//  Variable scope is available to the end of the execution of the code.
 const constVariable = "John Doe";
 console.log(constVariable);  // Output: "John Doe"
 console.log(window.constVariable);  //  Output:  undefined

//  Block Scope to the function
function() {
  const constVariable = "John Doe"; 
  console.log(constVariable);  // Output: "John Doe"
}
 console.log(constVariable);  // Output: undefined
 console.log(window.constVariable);  //  Output:  undefined

Redeclaration

Redeclaring a variable during the lifetime of the variable is possible in javascript.

using var keyword

Redeclaration of a var variable in the same scope is possible. It doesn't throw any error. But the value of the variable is updated as the execution progress. This is not a good method. It will lead to unexpected results in the code execution.

//  Redeclaration in same scope
 var myName= "John Doe";
 console.log(myName);  // Output: "John Doe"
 ...
 ...
 var myName= "jkjaikrishna";
 console.log(myName);  //  Output:  "jkjaikrishna"

//  Redeclaration in different scope
 var myName= "John Doe";
 console.log(myName);  // Output: "John Doe";
 ...
 ...
 function sampleFunction() {
     var myName = "Sam Cooper";
     console.log(myName);  //Output: "Sam Cooper"
 }
 ...
 ...
 sampleFunction();
 ...
 ...
 var myName= "jkjaikrishna";
 console.log(myName);  //  Output:  "jkjaikrishna"

using let keyword

let keyword is introduced in ES6 to avoid the redeclaration of variables in the same scope. But the declaration is possible in different block scopes.

//  Redeclaration in same scope
 let myName= "John Doe";
 console.log(myName);  // Output: "John Doe"
 ...
 ...
 let myName= "jkjaikrishna";
 console.log(myName);  //  Output:  Error: Uncaught SyntaxError: Identifier 'myName' has already been declared

//  Redeclaration in different scope
 let myName= "John Doe";
 console.log(myName);  // Output: "John Doe";
 ...
 ...
 function sampleFunction() {
     let myName = "Sam Cooper";
     console.log(myName);  //Output: "Sam Cooper"
 }
 ...
 ...
 sampleFunction();
 ...
 ...
 let myName= "jkjaikrishna";
 console.log(myName);  //  Output:  Error: Uncaught SyntaxError: Identifier 'myName' has already been declared

using const keyword

const variables are immutables. So redeclaration and value reassigning are not allowed in the same scope. For different scopes it's possible.

//  Redeclaration in same scope
 const myName= "John Doe";
 console.log(myName);  // Output: "John Doe"
 ...
 ...
 const myName= "jkjaikrishna";
 console.log(myName);  //  Output:  Error: Uncaught SyntaxError: Identifier 'myName' has already been declared

//  Redeclaration in different scope
 const myName= "John Doe";
 console.log(myName);  // Output: "John Doe";
 ...
 ...
 function sampleFunction() {
     const myName = "Sam Cooper";
     console.log(myName);  //Output: "Sam Cooper"
 }
 ...
 ...
 sampleFunction();
 ...
 ...
 var myName= "jkjaikrishna";
 console.log(myName);  //  Output:  Error: Uncaught SyntaxError: Identifier 'myName' has already been declared

Hoisting

The hot js interview question topic is here!! Hoisting is the JavaScript mechanism where,

variables and function declarations are moved to the top of their scope before code execution to avoid unexpected code breaking in the time of compilation.

using var keyword

The var keyword variables are hoisted to the top and declare its value as undefined


//  Hoisting with undefined value
 console.log(myName);  // Output: undefined
 ...
 ...
 const myName= "John Doe";

using let and const keyword

Like var keyword, it doesn't show undefined value, Instead of it they throws a Reference Error.


//  Hoisting with undefined value
 console.log(myName);  // Output: ReferenceError: 'myName is not defined'
 ...
 ...
 let/const myName= "John Doe";

One more thing...

The feature that we don't add in our list is value assigning and reassigning.

For var variables value assigning and reassigning can be done at any point in the code. This is also similar in the case of let keyword.

But const is something different in this case. The value to the const variables should be declared at the time of variable creation and it's can not be changed during code execution.

 // declaring a const variable without initializing.
 const myName; // Error: Uncaught SyntaxError: Missing initializer in const declaration
 ...

 //Reassigning a value to a const variable.
 const myName = "John Doe"; 
 ...
 myName = "jkjaikrishna";  //Error: Uncaught TypeError: Assignment to constant variable.

Even though push(), pop(), shift() and unshift() in a const array is possible.It's Because of the const variable stores only the reference to the array starting index.

 //push() to a const array.
 const fruits= ['mango', 'apple', 'orange'];

 fruits.push('strawberry');  //Output: ['mango', 'apple', orange','strawberry'];

//pop() from const array.
 const result = fruits.pop();  //Output: ['mango'];

//shift() on const array.
const animals= ['beer', 'wolf', 'tiger'];

 const result = animals.shift();  //Output: ['beer'];

 animals.unshift('lion');  //Output: ['lion', 'beer', 'wolf', 'tiger'];

Browser Support

All most all the browsers support var, let, and const keywords. You can check it here.

Conclusion

How can we conclude this topic? It's here!
- Scope: var declarations are function scoped, let/const are block-scoped.
- Re-declaration: var can be updated and re-declared, let can be updated, but not re-declared, const cannot be updated or re-declared.
- Hoisting: var is hoisted and initialized as undefined,let/const are hoisted without initialization and return Reference Error.