Introduction   In the fast-paced world of web development, performance and efficiency are... Tagged with webdev, javascript, programming, learning.

Dev.to is a community platform for developers, offering resources, discussions, and networking opportunities to empower individuals in their coding journey. Developers can learn new programming languages, frameworks, and tools, engage in discussions on best practices, and share their experiences with fellow developers to enhance their skills and grow their professional network.

Learn about throttle and debounce techniques in JavaScript to optimize event handling and improve performance.

Understanding JavaScript Debounce vs Throttle for Better App Efficiency

idk why I have this in my portfolio, but some month ago, I wanted to explain to a friend of mine these 3 concepts, I wrote this simple inputs with the use of each one <a href="https://surialpha.github.io/portfolio/" target="_blank" rel="noopener nofollow">https://surialpha.github.io/portfolio/</a>

In case you dont wanna login:
Debounce and Throttle are techniques commonly used in JavaScript to optimize the performance of functions that are triggered repeatedly, such as keyboard inputs, mouse movements, or window resize events. Here are the fundamental differences and examples for both techniques:
Debounce
Debounce delays the execution of a function until a specified time has elapsed without the event being triggered again. This means that the function will only execute if the event source has not sent any further events within the defined time period.
Use Case: Useful for input fields to minimize the number of API calls while a user is typing.
Code Example:
<pre><code class="language-javascript">
function debounce(fn, delay) {
 let timeoutId;
 return function(...args) {
 clearTimeout(timeoutId);
 timeoutId = setTimeout(() =&gt; {
 fn.apply(this, args);
 }, delay);
 };
}

function search(query) {
 console.log(`Searching for: ${query}`);
}

const debouncedSearch = debounce(search, 300);

// Simulated input events
debouncedSearch(&#x27;a&#x27;);
debouncedSearch(&#x27;ab&#x27;);
debouncedSearch(&#x27;abc&#x27;); // Only this call will execute after 300ms of no further inputs.
</code></pre>
In this example, the search function only executes if no further debouncedSearch calls occur within 300 milliseconds.
Throttle
Throttle limits the execution of a function to once per specified time interval. This means that the function will only be called at regular intervals, regardless of how frequently the event occurs.
Use Case: Useful for scroll or resize events to reduce the number of calculations or DOM updates.
Code Example:
<pre><code class="language-javascript">
function throttle(fn, limit) {
 let lastFunc;
 let lastRan;
 return function(...args) {
 const now = Date.now();
 if (!lastRan) {
 fn.apply(this, args);
 lastRan = now;
 } else {
 clearTimeout(lastFunc);
 lastFunc = setTimeout(() =&gt; {
 if (now - lastRan &gt;= limit) {
 fn.apply(this, args);
 lastRan = now;
 }
 }, limit - (now - lastRan));
 }
 };
}

function onScroll() {
 console.log(&#x27;Scroll event fired&#x27;);
}

const throttledScroll = throttle(onScroll, 1000);

// Simulated scroll events
window.addEventListener(&#x27;scroll&#x27;, throttledScroll);
</code></pre>
In this example, the onScroll function will execute at most once per second, regardless of how often the scroll event is triggered.
Summary
Debounce: Waits until the event has not been triggered for a specified time before executing the function. Ideal for functions that should be executed once after a pause.
Throttle: Executes the function at regular intervals, regardless of how often the event occurs. Ideal for functions that should be executed at consistent intervals.