JavaScript Throttling

The effectiveness of the features in a web application and how user events are managed by web applications are aspects that are likely to have caught your attention. JavaScript Throttling, also known as JavaScript Throttle, is a concept that offers a way to enhance the efficiency and speed of the application.

The throttling mechanism, also referred to as the throttle method, is a technique used to delay the execution of a function until a specified interval has passed after the initial event that triggered the function.

This guide will cover the topic of throttling, its practical applications, and how it can optimize the performance of applications. We will also examine the potential consequences of not implementing throttling. Furthermore, we will investigate various methods for incorporating throttling into our applications. Additionally, there exist several open-source libraries that provide utility functions for throttling, which we will review. Let's commence by understanding the definition of throttling and the reasons behind its necessity.

We will discuss the following topics:

• ✅ What is Throttling in JavaScript?
• ✅ Why use Throttling in JavaScript?
• ✅ How does Throttling work in JavaScript?
• ✅ Use cases for Throttling
• ✅ Difference between Throttling and Debouncing

What is Throttling in JavaScript?

Throttling in JavaScript refers to the technique of restricting the frequency of function executions to a set number of times, beyond which further executions are halted. This technique can also prevent a function from running if it has been recently invoked, ensuring a steady execution pace. In web development, throttling is commonly employed to improve application performance and avoid unnecessary re-renders.

An excellent illustration of Throttling is when you create a gaming app with multiple ongoing tournaments, and you intend for a user to participate in a competition only once every hour. In this scenario, you can control the user's access to content by implementing throttling. If the user has already participated in an event within the previous hour, their request will be denied. Despite repeated attempts to access the content, the throttling system will consistently restrict the user until the specified time interval has elapsed.

This process is referred to as throttling. We are restricting the rate at which a function can be executed for a specific duration, in this instance, one hour, in order to enable the user to participate in the contest.

Why use Throttling in JavaScript?

Throttling in JavaScript is a technique that can improve the performance of an application by controlling the frequency at which a function is executed.

The purpose of a Throttle function is to regulate the frequency of function calls by enforcing a consistent time interval, thereby avoiding performance issues such as lagging or overwhelming the application. This ensures that the server handles incoming requests in a sequential manner and at a steady pace.

How does Throttling work in JavaScript?

To illustrate the concept of JavaScript and the functioning of throttling, let's examine a practical scenario. Suppose we have implemented a scroll event listener on a webpage that displays specific information when a user scrolls. The issue arises when the user scrolls frequently, causing the webpage to generate an excessive number of events.

To address this challenge, we can implement throttling to ensure that the event is triggered only once a second after the previous event. By applying this technique, we can limit the callbacks to one per second, maintaining a seamless user experience while significantly improving computational efficiency.

To illustrate this concept, consider the following example. In this instance, we will utilize the throttle mechanism to distinguish between Throttling and non-throttling events.

Without using Throttling:

In the following instance, the button is triggered ten times, causing the function to execute ten times as well. This behavior is managed by a throttling mechanism.

Test.html:

<button id="throt_evt">Click Me</button>

<script>

    // Selected button with the given id

    const btn = document.querySelector("#throt_evt");

               

    // Add event listener to the button

    // to listen to the click event

    btn.addEventListener("click", () => {

        console.log("button is clicked");

    });

</script>

Output:

Based on the output provided, it is evident that the button was clicked ten times, resulting in the triggering of the event on ten occasions.

Now, let's consider the identical scenario but utilizing the throttling technique:

<button id="throt_evt">Click Me</button>

<script>

	const btn=document.querySelector("#throt_evt");

	

	//function for Throttling

	const myFunction=(func, delayTime)=>{

	

	// Previously invoked time of the function

	let prev = 0;

	return (...args) => {

		// Current invoked time of the function

		let current = new Date().getTime();

	

		// Logging the difference between the current and previous

		// called and current called timings

		console.log(current-prev, delayTime);

		

		// If the difference is greater than the delay call

		// the function again.

		if(current - prev> delayTime){

		prev = current;

	

		// "..." is the spread operator here

		// returning the function with the

		// array of arguments

		return func(...args);

		}

	}

	}

	btn.addEventListener("click", myFunction(()=>{

	console.log("clicked")

	}, 1000));

</script>

In the preceding instance, we are implementing the throttling technique in JavaScript.

The code provided above defines a button with the identifier "throt_evt". An event listener for a click is being attached to this button, and it will execute when the button is clicked.

Within the "myFunction" function, we accept two parameters. The initial parameter corresponds to the function that will be carried out, while the second parameter denotes a time delay specified in milliseconds.

Within the function mentioned earlier, the historical time value is retained. The function is set to run when the elapsed time between the previous and current instances exceeds the designated delay period.

The function mentioned above logs the message "clicked" to the console upon clicking the button, with a delay of 1000 milliseconds, equivalent to 1 second.

Consider the below output:

Output:

By examining the output displayed above, we can observe that if the elapsed time exceeds 1 millisecond, the system logs the message "clicked".

The method described is known as JavaScript throttling technique.

Use cases for Throttling

A throttle function is designed to control the execution rate of a function, ensuring it runs at a specific frequency. This helps in avoiding application slowdowns or server overload when handling tasks that are resource-intensive or involve long processing times. Here are several typical scenarios where a throttle function is beneficial:

In Gaming

In gaming, when a player presses a button to perform an action like punching or shooting, they may rapidly press the button multiple times within a second. To ensure that actions are triggered at a specific rate per second, the concept of Throttling becomes valuable in such scenarios.

Scroll event listeners

Scroll event handlers are commonly employed to execute specific operations and monitor scroll positions. They are typically utilized for loading or animating content.

In order to effectively respond to these occurrences, it is essential to restrict user activities. Excessive scrolling by the user can potentially degrade the performance of the application. In such scenarios, it is necessary to implement throttling mechanisms to ensure efficient presentation of user data.

Button click listeners

Implementing throttling is crucial for regulating click events related to particular operations. For instance, in the scenario of an ATM machine, there exists a defined timeframe within which a transaction must be finalized, preventing the initiation of any additional events during this period. This concept can also be extended to web applications to control user interactions, ensuring that a callback function is executed only after a specified duration. By doing so, users are presented with accurate outputs while preventing excessive clicking activities.

Pointer events

Throttling can be applied to pointer events, much like it is done with other types of events. Pointer events, such as scroll events, involve users moving the mouse pointer frequently, causing the event to be triggered repeatedly. To prevent any undesired outcomes, limiting the pointer events can be beneficial.

Utilizing mouse movement and additional pointer actions is a common practice for monitoring the location of the cursor. By adjusting webpage elements based on the cursor's current position, we can minimize the frequency of callback function calls. This optimization helps in reducing the volume of callback invocations.

API calls

Limiting the timeframe for events in API requests is crucial. Excessive API calls can have a negative impact on the loading time of a page. Therefore, there are instances where it is necessary to control the number of external API calls made by our application.

Throttling can be highly beneficial in such scenarios by setting a limit on the rate of API calls. This helps prevent excessive requests being sent to the server.

Difference between Throttling and Debouncing

Debouncing and Throttling are fundamental methods that can greatly enhance the efficiency of an application.

We have covered the concept of Throttling in JavaScript. Now, let's delve into the concept of debouncing before we explore the primary distinctions between the two.

What is Debouncing

Debouncing is a technique used to optimize function calls by postponing them for a set duration, thus avoiding redundant invocations. It guarantees that the designated function is executed solely when there are no fresh events being triggered. In case a new event occurs during the predetermined delay period, the timer is reset to accommodate the latest event.

Let's consider a scenario in which we are required to make API calls to retrieve data. The occurrence of multiple event triggers within a short time frame might lead to potential issues. To prevent such problems, we can address them by incorporating a debouncing method with a specified delay period.

If the user initiates an event within a set time period, the function will reset the delay duration and pause before executing the API request.

Implementing the debouncing technique can be achieved effortlessly by utilizing the setTimeout and clearTimeout functions. To apply this method, the function needs to accept a callback function and a delay as its input parameters.

Consider the below example:

function myFunction(callback, delay = 1000) {

  var time;



  return (...args) => {

    clearTimeout(time);

    time = setTimeout(() => {

      callback(...args);

    }, delay);

  };

}

In the previous instance, it is evident that 'myFunction' serves as a wrapper for the callback function, guaranteeing its execution after a default delay of 1 second.

The contrast between debouncing and throttling lies in their functionality. De-bouncing involves postponing the execution of a function for a set duration after the last function call, preventing any additional calls during this time frame. On the other hand, throttling restricts the frequency of function calls within a specific time interval.

Let's now delve into direct comparisons between debouncing and throttling techniques.

Debounce VS Throttle

Summary:

Throttling in JavaScript is a technique that restricts the number of times a function can be executed within a specified timeframe. This technique guarantees that the function is run consistently at set intervals, irrespective of the frequency of its invocation.

In comparison, debouncing is an alternative method employed to avoid unnecessary function calls by postponing them for a defined duration.