More from Martin Sojka

Rails Callback: Automatically Normalize Usernames Before Save Rails Background Jobs with ActiveJob and Sidekiq Rails ActiveStorage: Attach and Display Images Easily Using Rails Callbacks to Auto-Generate a Unique Slug

RSS

JavaScript Debounce Function to Optimize Event Handling

48 views

0 comments

                  function debounce(func, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
}

export default debounce;

                  import debounce from './debounce.js';

window.addEventListener('resize', debounce(() => {
  console.log('Resize event triggered!');
}, 300));

Debouncing is essential for optimizing performance when handling frequent events like scrolling, resizing, or input typing. This snippet defines a debounce function in a separate file for modularity, allowing easy reuse across projects. The resizing.js file demonstrates how to import and use it specifically for a resize event. A common challenge is ensuring proper this binding, which is why .apply(this, args) is used. This technique helps improve UI responsiveness and prevents excessive function executions, making web applications smoother.

Martin Sojka

More from Martin Sojka

JavaScript Debounce Function to Optimize Event Handling

0 Comments

More from Martin Sojka