Breaking News: Grepper is joining You.com. Read the official announcement!

how to write a debounce function

Add Answer

Dark Dugong answered on February 4, 2022 Popularity 9/10 Helpfulness 2/10

answer how to write a debounce function

related debounce function in javascript

related debounce function javascript

related debounce function

how to write a debounce function

Comment

function debounce(func, timeout = 300){
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => { func.apply(this, args); }, timeout);
  };
}
function saveInput(){
  console.log('Saving data');
}
const processChange = debounce(() => saveInput());

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: www.freecodecamp.org

Tags: debounce function javascript

Link to this answer
Share Copy Link

Contributed on Mar 20 2023

Dark Dugong

0 Answers Avg Quality 2/10

Closely Related Answers

debounce function in javascript

Comment

// Add this in HTML
<button id="myid">Click Me</button>

// This is JS Code for debounce function
const debounce = (fn,delay ) => {
  let timeoutID; // Initially undefined
  
  return function(...args){
    
    // cancel previously unexecuted timeouts
    if(timeoutID){
      clearTimeout(timeoutID);
    }
    
    timeoutID = setTimeout( () => {
      fn(...args);
    }, delay)
  }
}


document.getElementById('myid').addEventListener('click', debounce(e => {
  console.log('you clicked me');
}, 2000))

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: debounce debounc

Link to this answer
Share Copy Link

Contributed on Feb 04 2022

Muthukumar

0 Answers Avg Quality 2/10

debounce function javascript

Comment

function debounce(func, delay) {
  let timeoutId;
  
  return function() {
    const context = this;
    const args = arguments;
    
    clearTimeout(timeoutId);
    
    timeoutId = setTimeout(function() {
      func.apply(context, args);
    }, delay);
  };
}

// Usage example
function search() {
  // Perform search functionality
  console.log('Searching...');
}

const searchDebounced = debounce(search, 500);

// Call debounced search function
searchDebounced(); // This will wait for 500ms before calling the actual search function

Popularity 9/10 Helpfulness 3/10 Language javascript

Source: Grepper

Link to this answer
Share Copy Link

Contributed on Sep 12 2023

YOU.com

0 Answers Avg Quality 2/10

debounce function

Comment

function debounce(func, wait, immediate) {
  // 'private' variable for instance
  // The returned function will be able to reference this due to closure.
  // Each call to the returned function will share this common timer.
  var timeout;

  // Calling debounce returns a new anonymous function
  return function() {
    // reference the context and args for the setTimeout function
    var context = this,
      args = arguments;

    // Should the function be called now? If immediate is true
    //   and not already in a timeout then the answer is: Yes
    var callNow = immediate && !timeout;

    // This is the basic debounce behaviour where you can call this 
    //   function several times, but it will only execute once 
    //   [before or after imposing a delay]. 
    //   Each time the returned function is called, the timer starts over.
    clearTimeout(timeout);

    // Set the new timeout
    timeout = setTimeout(function() {

      // Inside the timeout function, clear the timeout variable
      // which will let the next execution run when in 'immediate' mode
      timeout = null;

      // Check if the function already ran with the immediate flag
      if (!immediate) {
        // Call the original function with apply
        // apply lets you define the 'this' object as well as the arguments 
        //    (both captured before setTimeout)
        func.apply(context, args);
      }
    }, wait);

    // Immediate mode and no wait timer? Execute the function..
    if (callNow) func.apply(context, args);
  }
}

/////////////////////////////////
// DEMO:

function onMouseMove(e){
  console.clear();
  console.log(e.x, e.y);
}

// Define the debounced function
var debouncedMouseMove = debounce(onMouseMove, 50);

// Call the debounced function on every mouse move
window.addEventListener('mousemove', debouncedMouseMove);
 Run code snippet

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: stackoverflow.com

Tags: debounce debounc

Link to this answer
Share Copy Link

Contributed on Aug 24 2022

Akash Pise

0 Answers Avg Quality 2/10

how to write a debounce function

Contents

More Related Answers

how to write a debounce function

Closely Related Answers

debounce function in javascript

debounce function javascript

debounce function

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.