DEV Community: Himanshu Sahni

Debouncing ⏳ Vs Throttling ⏱

Himanshu Sahni — Sat, 06 Jul 2024 18:56:10 +0000

Debouncing and throttling are both used to enhance the website performance by limiting the number of times the events are triggered. Debouncing and throttling are not provided by JavaScript. They’re just concepts that can be implemented using the setTimeout web API.

Debouncing ⏳

In the debouncing technique, no matter how many Times the user fires the event, the attached function will be executed only after The specified time once the user stops firing the event.

Throttling ⏱

Throttling is a Technique in which, no matter how many times the user fires The event, the attached function will be executed only once in a given time interval.

Comparison between Debouncing and Throttling

Real life Scenarios

Debounce in Action: Live Search
Consider a live search feature where users see search results as they type. Debouncing ensures that the search function is triggered only after the user pauses, preventing unnecessary server requests during rapid typing.

Throttle in Action: Scrolling Animation
Imagine a scroll-triggered animation. Throttling can be applied to update the animation at a controlled rate, preventing a flood of updates and ensuring a smoother visual experience.

Conclusion

Debounce and throttle are indispensable tools in a developer's toolkit, offering precise control over the execution of code in response to user actions.

Debounce is your patient friend, waiting for the right moment, while throttle is the regulator, maintaining a steady pace.

Understanding when and how to apply these concepts can significantly enhance the performance and user experience of your web applications.

I hope you liked this article 😀
Happy_Coding 😎

Follow me for more tutorials and tips on web development. Feel free to leave comments or questions below!

Follow and Subscribe 🤗

Twitter - https://twitter.com/mrHimanshuSahni
Linkedin - https://www.linkedin.com/in/mrhimanshusahni/
Github - https://github.com/mrhimanshusahni
Youtube - https://www.youtube.com/@mrhimanshusahni

Throttling in JavaScript ⏱🚀

Himanshu Sahni — Sat, 06 Jul 2024 18:55:48 +0000

As a developer, making your website user-friendly is important. This goes a long way toward the product's success, and a key part of the user experience is the website's performance.

Table of Contents 📃

What is Throttling in JavaScript?
How to implement Throttling in JavaScript
Implement Throttling using a Custom Hook
Implementations of throttling in JavaScript libraries
Why use Throttling?
Use Cases for Throttling

What is Throttling? 🙄

Throttling is a technique that limits how often a function can be called in a given period of time. It is useful for improving the performance and responsiveness of web pages that have event listeners that trigger heavy or expensive operations, such as animations, scrolling, resizing, fetching data, etc.

For example, if you have a function that fetches some data from an API every time the user scrolls the page, you might want to throttle it so that it only makes one request every second, instead of making hundreds of requests as the user scrolls. This way, you can avoid overloading the server or the browser with unnecessary requests and reduce the bandwidth consumption.

Pictorial Representation

How to implement Throttling in JavaScript

Let's Take a function myFunction(a, b) having two arguments.

We want to modify this function so that it can only be called once in 500ms. So, throttling will take myFunction() as an input, and return a modified (throttled) function throttledFun() that can only be executed 500ms after the previous function was executed.

By using the above throttled function, we now can have throttledFun() based on myFunction().

Implement Throttling using a Custom Hook

Create a new file called as useThrottle.js.
Add the below custom function that we have made above.

Usage of throttling and myFunction() with custom throttled hook.

Throttling & Debouncing with JavaScript libraries

Libraries such as Lodash offer _.debounce and _.throttle functions, providing a more robust and cross-browser compatible solution.

Why use Throttling?

Performance Enhancement: Reduces the number of function executions, prevents Overloading the server or the browser with too many requests or calculations.
Resource Management: To manage the bandwidth or resources on operations that are not visible or relevant to the user.
Consistent Updates: Ensures regular updates at specified intervals, useful for tasks like updating a position indicator during scrolling.

Use Cases for Throttling

Scroll event listeners: Many web applications utilize a scroll event listener to keep track of the scroll position and load or animate the content appropriately. In these cases, the scroll event may have a negative performance impact if we scroll it too frequently since it contains many videos and images. Thus, we must use throttling for the scroll event.
In Gaming: In games, a player needs to push the button to trigger any action, such as punching, shooting but during playtime, the user can hit the button more than one time in a second, and we want to trigger an action at the rate per second then the concept of Throttling will be useful for it.
API Calls: In some cases, we may wish to limit how frequently our application calls an external API. In this case, throttling can be advantageous. By rate limiting the calling function, it would eliminate unnecessary API requests to the server.

Conclusion

Throttling is a powerful technique for optimizing web applications by controlling the frequency of function executions. By ensuring functions are called at regular intervals, throttling helps manage performance and resource usage effectively. Whether dealing with scrolling, resizing, or other rapid events, throttling is an essential tool in your JavaScript toolkit.

I hope you found this blog helpful and learned something new about throttling in JavaScript.

You can check out my recent articles on

Debouncing in JavaScirpt

Debouncing in JavaScript

Himanshu Sahni ・ Jun 9

#javascript #webdev #learning #tutorial
Debouncing vs Throttling

Debouncing ⏳ Vs Throttling ⏱

Himanshu Sahni ・ Jul 6

#webdev #javascript #beginners #tutorial

I hope you liked this article 😀
Happy_Coding 😎

Follow me for more tutorials and tips on web development. Feel free to leave comments or questions below!

Follow and Subscribe 🤗

Twitter - https://twitter.com/mrHimanshuSahni
Linkedin - https://www.linkedin.com/in/mrhimanshusahni/
Github - https://github.com/mrhimanshusahni
Youtube - https://www.youtube.com/@mrhimanshusahni

Debouncing in JavaScript

Himanshu Sahni — Sun, 09 Jun 2024 10:03:10 +0000

Debouncing in General term

Debouncing is a technique in programming that helps prevent time-consuming tasks from being triggered so frequently that they slow down the performance of a web page. In simpler terms, it controls how often a function is called.

What is Debouncing in JavaScript? 🤔

In JavaScript, debouncing is commonly used to enhance browser performance. Sometimes, certain actions on a web page involve complex computations that take up time. If these actions are triggered too frequently, it can significantly impact the browser's performance, especially since JavaScript operates on a single thread.

For Example: Suppose we have a Search Input on the main page of a website that shows suggestions as the user types. Let's call a function to fetch suggestions on every keystroke. We might end up making too many requests to the backend server, which can slow down the application, waste resources, and, more importantly, affect User Experience. Instead, we can use debouncing to wait until the user has stopped typing for a while before making the request.

How to implement debouncing in JavaScript? 😮

The most common way to implement debouncing in JavaScript is to use a wrapper function that returns a new function that delays the execution of the original function.

Debouncing accepts a function and transforms it in to an updated (debounced) function so that the code inside the original function is executed after a certain period of time. If the debounced function is called again within that period, the previous timer is reset and a new timer is started for this function call. The process repeats for each function call.

Suppose we have a function getData() that needs to execute after say's 300ms

Let's implement a debounce wrapper

Create a index.js file

How to use debounce function to use with original getData() function

Debounce Implementation using a Custom Hook

The advantage of custom hooks is that you can reuse the same logic throughout your application. It is highly advisable to do so.

Usage of debounce in hook with the above example

In the above example:, we have type laptop as the input keyword, it has 6 words so 6 times onChange Event is triggered but using the debounce technique we delay this function call after the user has finished typing or delay between 2 key press is greater than delay timer pass in debounce function.

Use Case of Debouncing/Real-life examples of Debouncing

Google Search: Auto-complete functionality.
Elevator: When you press the button to call the elevator, it doesn’t move immediately, but waits for a few seconds to see if anyone else wants to get on or off. This way, it avoids going up and down too frequently and saves energy and time.

Conclusion

Debouncing is a useful technique to optimize web applications by reducing unnecessary or repeated function calls that might affect the performance or user experience.
Debouncing uses the important concept of closures.

I hope you found this blog helpful and learned something new about Debouncing in JavaScript.

KeepLearning, Happy_Coding

Thanks for Reading 😀🤩

Currying in JavaScript

Himanshu Sahni — Sat, 01 Jun 2024 12:56:16 +0000

What is Function Currying in JavaScript ? 🙄🙄

Currying is an advanced technique of working with functions. It’s used not only in JavaScript, but in other languages as well.

It is a technique in functional programming, that transforms the function of multiple arguments into several functions of a single argument in sequence.

The translation of function happens something like this,

Currying is a transformation of functions that translates a function from callable as f(a, b, c) into callable as f(a)(b)(c).

Please note: Currying doesn’t call a function. It just transforms it.

How to achieve Currying in JavaScript?

Currying is not built-in by default in JavaScript. We can implement currying by following the ways

It can be achieved by using the bind() method.
It can be achieved by using the closures.
Using Third-party libraries such as Lodash.

1) Currying using bind() method

2) Currying using closures in JavaScript

3) Currying using Third-party Library Lodash

Why is currying useful in JavaScript

Code re-usability: Curried functions can be used to create reusable code that can be used in different contexts. Since curried functions can be partially applied, they can be reused with different arguments to create new functions.
Improved code readability: Curried functions can make code more readable and expressive by breaking down complex logic into smaller, more manageable pieces. This can make it easier for developers to understand and maintain code.
It helps us to avoid passing the same variable multiple times.
Promotes functional programming: Currying is a key concept in functional programming, and using curried functions in your code can promote functional programming practices.
It reduces the chances of error in our function by dividing it into multiple smaller functions that can handle one responsibility

Noted Points: The currying requires the function to have a fixed number of arguments.

A function that uses rest parameters, such as f(...args), can’t be curried this way.

Summary

Currying in JavaScript is a technique that does the transform and makes f(a,b,c) callable as f(a)(b)(c).

Conclusion

Currying is a great technique that can bring many benefits to JavaScript programming.

By using the currying technique, you can create more re-usable, maintainable, and modular code that is better suited to the challenges of modern web development.

Thanks for Reading 🙏😇

Monkey Patching in JavaScript

Himanshu Sahni — Mon, 27 May 2024 19:08:46 +0000

What is Monkey Patching 🐵

The term “monkey patching” is borrowed from the world of software development, where it refers to the practice of modifying or extending code at runtime. In JavaScript, it allows developers to alter or extend the behavior of existing objects or classes without directly modifying their source code.

In simple term's it is : Monkey patching is a technique to add, modify, or suppress the default behavior of a piece of code at runtime without changing its original source code.

Monkey patching involves making changes to existing code, typically by adding new methods or properties to objects or classes, or by modifying existing ones. This can be done at runtime, allowing developers to augment functionality without altering the original code base. Monkey patching is often used to fix bugs, add missing features, or adapt third-party libraries to better suit specific requirements.

Let's see a basic example to understand this concept

Pros of Monkey Patching

Monkey patching allows developers to extend or modify existing code without directly altering its source, providing flexibility in adapting libraries or frameworks to specific requirements.
Developers can experiment with new features or enhancements without committing to permanent changes in the code base.
It enables quick fixes to issues or bugs in third-party code without waiting for official updates or patches.

Cons of Monkey Patching

Overuse of monkey patching can lead to code base complexity and reduced readability, making it harder to understand and maintain.
Modifying existing code at runtime can introduce unintended side effects or conflicts, especially in large or collaborative projects.
Global Scope Pollution: Global scope pollution refers to a situation where too many variables, functions, or objects are introduced into the global scope. This makes it cluttered and can potentially lead to unintended behaviors. Monkey patching can introduce global scope pollution by adding or modifying properties and methods on built-in prototypes or objects. This can lead to naming conflicts and bugs, especially when using multiple libraries or codebases.

Traditional Monkey Patching and Why It Is it is Dangerous

The author of Array could add a different implementation of logAllMembers, which could break your code which relies on your implementation.
Elsewhere in your codebase, someone could add a different implementation of logAllMembers, leading to fragile code.
Elsewhere in your codebase, it will be hard to tell whether Array has been patched or not, so other programmers (or you) could accidentally depend on Array being patched or not-patched.

Conclusion

Monkey patching is a powerful technique for extending or modifying existing code dynamically. However, it comes with considerations like understanding the prototype chain, avoiding global scope pollution. While implementing monkey patching, you must exercise caution, document changes, and thoroughly test patches to mitigate compatibility issues and security risks.

DEV Community: Himanshu Sahni

Debouncing ⏳ Vs Throttling ⏱

Debouncing ⏳

Throttling ⏱

Comparison between Debouncing and Throttling

Real life Scenarios

Conclusion

Follow and Subscribe 🤗

Throttling in JavaScript ⏱🚀

Table of Contents 📃

What is Throttling? 🙄

Pictorial Representation

How to implement Throttling in JavaScript

Implement Throttling using a Custom Hook

Throttling & Debouncing with JavaScript libraries

Why use Throttling?

Use Cases for Throttling

Conclusion

Debouncing in JavaScript

Himanshu Sahni ・ Jun 9

Debouncing ⏳ Vs Throttling ⏱

Himanshu Sahni ・ Jul 6

Follow and Subscribe 🤗

Debouncing in JavaScript

Debouncing in General term

What is Debouncing in JavaScript? 🤔

How to implement debouncing in JavaScript? 😮

Debounce Implementation using a Custom Hook

Use Case of Debouncing/Real-life examples of Debouncing

Conclusion

Currying in JavaScript

What is Function Currying in JavaScript ? 🙄🙄

Summary

Conclusion

Monkey Patching in JavaScript

What is Monkey Patching 🐵

Conclusion