200

I am interested in the "debouncing" function in JavaScript, at JavaScript Debounce Function.

Unfortunately the code is not explained clearly enough for me to understand. How does it work (I left my comments below)? In short, I just really do not understand how this works.

   // Returns a function, that, as long as it continues to be invoked, will not
   // be triggered. The function will be called after it stops being called for
   // N milliseconds.


function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

The copied code snippet previously had callNow in the wrong spot.

3
  • 1
    If you call clearTimeout with something that isn’t a valid timer ID, it doesn’t do anything.
    – Ry-
    Jun 2, 2014 at 23:22
  • @false, Is that valid standard behavior?
    – Pacerier
    Jun 2, 2014 at 23:37
  • 3
    @Pacerier Yes, it is in the spec: "If handle does not identify an entry in the list of active timers of the WindowTimers object on which the method was invoked, the method does nothing." Jun 2, 2014 at 23:43

14 Answers 14

172

The code in the question was altered slightly from the code in the link. In the link, there is a check for (immediate && !timeout) before creating a new time-out. Having it after causes immediate mode to never fire. I have updated my answer to annotate the working version from the link.

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);

10
  • 1
    for the immediate && timeout check. Won't there always be a timeout (because timeout is called earlier). Also, what good does clearTimeout(timeout) do, when it is declared (making it undefined) and cleared, earlier
    – Startec
    Jun 3, 2014 at 4:23
  • The immediate && !timeout check is for when debounce is configured with the immediate flag. This will execute the function immediately but impose a wait timeout before if can be executed again. So the !timeout part is basically saying 'sorry bub, this was already executed within the defined window`...remember the setTimeout function will clear it, allowing the next call to execute.
    – Malk
    Jun 3, 2014 at 17:18
  • 1
    Why does timeout have to be set to null inside of the setTimeout function? Also, I have tried this code, for me, passing in true for immediate just prevents the function from being called at all (rather than being called after a delay). Does this happen for you?
    – Startec
    Jun 3, 2014 at 20:30
  • I have a similar question about immediate? why does it need to have the immediate param. Setting wait to 0 should have the same effect, right? And as @Startec mentioned, this behavior is pretty weird.
    – zeroliu
    Jul 6, 2015 at 19:21
  • 2
    If you just call the function then you cannot impose a wait timer before that function can be called again. Think of a game where the user mashes the fire key. You want that fire to trigger immediately, but not fire again for another X milliseconds no matter how fast the user mashes the button.
    – Malk
    Jul 10, 2015 at 19:54
64

The important thing to note here is that debounce produces a function that is "closed over" the timeout variable. The timeout variable stays accessible during every call of the produced function even after debounce itself has returned, and can change over different calls.

The general idea for debounce is the following:

  1. Start with no timeout.
  2. If the produced function is called, clear and reset the timeout.
  3. If the timeout is hit, call the original function.

The first point is just var timeout;, it is indeed just undefined. Luckily, clearTimeout is fairly lax about its input: passing an undefined timer identifier causes it to just do nothing, it doesn't throw an error or something.

The second point is done by the produced function. It first stores some information about the call (the this context and the arguments) in variables so it can later use these for the debounced call. It then clears the timeout (if there was one set) and then creates a new one to replace it using setTimeout. Note that this overwrites the value of timeout and this value persists over multiple function calls! This allows the debounce to actually work: if the function is called multiple times, timeout is overwritten multiple times with a new timer. If this were not the case, multiple calls would cause multiple timers to be started which all remain active - the calls would simply be delayed, but not debounced.

The third point is done in the timeout callback. It unsets the timeout variable and does the actual function call using the stored call information.

The immediate flag is supposed to control whether the function should be called before or after the timer. If it is false, the original function is not called until after the timer is hit. If it is true, the original function is first called and will not be called any more until the timer is hit.

However, I do believe that the if (immediate && !timeout) check is wrong: timeout has just been set to the timer identifier returned by setTimeout so !timeout is always false at that point and thus the function can never be called. The current version of underscore.js seems to have a slightly different check, where it evaluates immediate && !timeout before calling setTimeout. (The algorithm is also a bit different, e.g. it doesn't use clearTimeout.) That's why you should always try to use the latest version of your libraries. :-)

3
  • 1
    "Note that this overwrites the value of timeout and this value persists over multiple function calls" Isn't timeout local to each debounce call? It is declared with var. How is it overwritten each time? Also, why check for !timeout at the end? Why doesn't it always exist (because it is set to setTimeout(function() etc.)
    – Startec
    Jun 3, 2014 at 3:36
  • 2
    @Startec It is local to each call of debounce, yes, but it is shared among calls to the returned function (which is the function you're going to use). For example, in g = debounce(f, 100), the value of timeout persists over multiple calls to g. The !timeout check at the end is a mistake I believe, and it is not in the current underscore.js code. Jun 3, 2014 at 10:48
  • Why does timeout need to be cleared early in the return function (right after it is declared)? Also, it is then set to null inside of the setTimeout function. Isn't this redundant? (First it is cleared, then it is set to null. In my tests with the above code, setting immediate to true makes the function not call at all, as you mentioned. Any solution without underscore?
    – Startec
    Jun 4, 2014 at 10:26
44

Debounced functions do not execute when invoked. They wait for a pause of invocations over a configurable duration before executing; each new invocation restarts the timer.

Throttled functions execute and then wait a configurable duration before being eligible to fire again.

Debounce is great for keypress events; when the user starts typing and then pauses you submit all the key presses as a single event, thus cutting down on the handling invocations.

Throttle is great for real-time endpoints that you only want to allow the user to invoke once per a set period of time.

Check out Underscore.js for their implementations too.

0
32

I too didn't fully understand how a debounce function worked when I first encountered one. Although relatively small in size, they actually employ some pretty advanced JavaScript concepts! Having a good grip on scope, closures and the setTimeout method will help.

With that said, below is the basic debounce function explained and demoed in my post referenced above.

The finished product

// Create JD Object
// ----------------
var JD = {};

// Debounce Method
// ---------------
JD.debounce = function(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this,
            args = arguments;
        var later = function() {
            timeout = null;
            if ( !immediate ) {
                func.apply(context, args);
            }
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait || 200);
        if ( callNow ) { 
            func.apply(context, args);
        }
    };
};

The explanation

// Create JD Object
// ----------------
/*
    It's a good idea to attach helper methods like `debounce` to your own 
    custom object. That way, you don't pollute the global space by 
    attaching methods to the `window` object and potentially run in to
    conflicts.
*/
var JD = {};

// Debounce Method
// ---------------
/*
    Return a function, that, as long as it continues to be invoked, will
    not be triggered. The function will be called after it stops being 
    called for `wait` milliseconds. If `immediate` is passed, trigger the 
    function on the leading edge, instead of the trailing.
*/
JD.debounce = function(func, wait, immediate) {
    /*
        Declare a variable named `timeout` variable that we will later use 
        to store the *timeout ID returned by the `setTimeout` function.

        *When setTimeout is called, it retuns a numeric ID. This unique ID
        can be used in conjunction with JavaScript's `clearTimeout` method 
        to prevent the code passed in the first argument of the `setTimout`
        function from being called. Note, this prevention will only occur
        if `clearTimeout` is called before the specified number of 
        milliseconds passed in the second argument of setTimeout have been
        met.
    */
    var timeout;

    /*
        Return an anomymous function that has access to the `func`
        argument of our `debounce` method through the process of closure.
    */
    return function() {

        /*
            1) Assign `this` to a variable named `context` so that the 
               `func` argument passed to our `debounce` method can be 
               called in the proper context.

            2) Assign all *arugments passed in the `func` argument of our
               `debounce` method to a variable named `args`.

            *JavaScript natively makes all arguments passed to a function
            accessible inside of the function in an array-like variable 
            named `arguments`. Assinging `arguments` to `args` combines 
            all arguments passed in the `func` argument of our `debounce` 
            method in a single variable.
        */
        var context = this,   /* 1 */
            args = arguments; /* 2 */

        /*
            Assign an anonymous function to a variable named `later`.
            This function will be passed in the first argument of the
            `setTimeout` function below.
        */
        var later = function() {
            
            /*      
                When the `later` function is called, remove the numeric ID 
                that was assigned to it by the `setTimeout` function.

                Note, by the time the `later` function is called, the
                `setTimeout` function will have returned a numeric ID to 
                the `timeout` variable. That numeric ID is removed by 
                assiging `null` to `timeout`.
            */
            timeout = null;

            /*
                If the boolean value passed in the `immediate` argument 
                of our `debouce` method is falsy, then invoke the 
                function passed in the `func` argument of our `debouce`
                method using JavaScript's *`apply` method.

                *The `apply` method allows you to call a function in an
                explicit context. The first argument defines what `this`
                should be. The second argument is passed as an array 
                containing all the arguments that should be passed to 
                `func` when it is called. Previously, we assigned `this` 
                to the `context` variable, and we assigned all arguments 
                passed in `func` to the `args` variable.
            */
            if ( !immediate ) {
                func.apply(context, args);
            }
        };

        /*
            If the value passed in the `immediate` argument of our 
            `debounce` method is truthy and the value assigned to `timeout`
            is falsy, then assign `true` to the `callNow` variable.
            Otherwise, assign `false` to the `callNow` variable.
        */
        var callNow = immediate && !timeout;

        /*
            As long as the event that our `debounce` method is bound to is 
            still firing within the `wait` period, remove the numerical ID  
            (returned to the `timeout` vaiable by `setTimeout`) from 
            JavaScript's execution queue. This prevents the function passed 
            in the `setTimeout` function from being invoked.

            Remember, the `debounce` method is intended for use on events
            that rapidly fire, ie: a window resize or scroll. The *first* 
            time the event fires, the `timeout` variable has been declared, 
            but no value has been assigned to it - it is `undefined`. 
            Therefore, nothing is removed from JavaScript's execution queue 
            because nothing has been placed in the queue - there is nothing 
            to clear.

            Below, the `timeout` variable is assigned the numerical ID 
            returned by the `setTimeout` function. So long as *subsequent* 
            events are fired before the `wait` is met, `timeout` will be 
            cleared, resulting in the function passed in the `setTimeout` 
            function being removed from the execution queue. As soon as the 
            `wait` is met, the function passed in the `setTimeout` function 
            will execute.
        */
        clearTimeout(timeout);

        /*
            Assign a `setTimout` function to the `timeout` variable we 
            previously declared. Pass the function assigned to the `later` 
            variable to the `setTimeout` function, along with the numerical 
            value assigned to the `wait` argument in our `debounce` method. 
            If no value is passed to the `wait` argument in our `debounce` 
            method, pass a value of 200 milliseconds to the `setTimeout` 
            function.  
        */
        timeout = setTimeout(later, wait || 200);

        /*
            Typically, you want the function passed in the `func` argument
            of our `debounce` method to execute once *after* the `wait` 
            period has been met for the event that our `debounce` method is 
            bound to (the trailing side). However, if you want the function 
            to execute once *before* the event has finished (on the leading 
            side), you can pass `true` in the `immediate` argument of our 
            `debounce` method.

            If `true` is passed in the `immediate` argument of our 
            `debounce` method, the value assigned to the `callNow` variable 
            declared above will be `true` only after the *first* time the 
            event that our `debounce` method is bound to has fired.

            After the first time the event is fired, the `timeout` variable
            will contain a falsey value. Therfore, the result of the 
            expression that gets assigned to the `callNow` variable is 
            `true` and the function passed in the `func` argument of our
            `debounce` method is exected in the line of code below.

            Every subsequent time the event that our `debounce` method is 
            bound to fires within the `wait` period, the `timeout` variable 
            holds the numerical ID returned from the `setTimout` function 
            assigned to it when the previous event was fired, and the 
            `debounce` method was executed.

            This means that for all subsequent events within the `wait`
            period, the `timeout` variable holds a truthy value, and the
            result of the expression that gets assigned to the `callNow`
            variable is `false`. Therefore, the function passed in the 
            `func` argument of our `debounce` method will not be executed.  

            Lastly, when the `wait` period is met and the `later` function
            that is passed in the `setTimeout` function executes, the 
            result is that it just assigns `null` to the `timeout` 
            variable. The `func` argument passed in our `debounce` method 
            will not be executed because the `if` condition inside the 
            `later` function fails. 
        */
        if ( callNow ) { 
            func.apply(context, args);
        }
    };
};
1
  • I was having difficulty digesting this implementation which i saw on yt video. this detailed explanation helped me understand. Thanks a lot.
    – Anish Arya
    Nov 26, 2023 at 16:38
15

we're all using Promises now

Many implementations I've seen over-complicate the problem or have other hygiene issues. It's 2021 and we've been using Promises for a long time now – and for good reason, too. Promises clean up asynchronous programs and reduce the opportunities for mistakes to happen. In this post we will write our own debounce. This implementation will -

  • have at most one promise pending at any given time (per debounced task)
  • stop memory leaks by properly cancelling pending promises
  • resolve only the latest promise
  • demonstrate proper behaviour with live code demos

We write debounce with its two parameters, the task to debounce, and the amount of milliseconds to delay, ms. We introduce a single local binding for its local state, t -

function debounce (task, ms) {
  let t = { promise: null, cancel: _ => void 0 }
  return async (...args) => {
    try {
      t.cancel()
      t = deferred(ms)
      await t.promise
      await task(...args)
    }
    catch (_) { /* prevent memory leak */ }
  }
}

We depend on a reusable deferred function, which creates a new promise that resolves in ms milliseconds. It introduces two local bindings, the promise itself, an the ability to cancel it -

function deferred (ms) {
  let cancel, promise = new Promise((resolve, reject) => {
    cancel = reject
    setTimeout(resolve, ms)
  })
  return { promise, cancel }
}

click counter example

In this first example, we have a button that counts the user's clicks. The event listener is attached using debounce, so the counter is only incremented after a specified duration -

// debounce, deferred
function debounce (task, ms) { let t = { promise: null, cancel: _ => void 0 }; return async (...args) => { try { t.cancel(); t = deferred(ms); await t.promise; await task(...args); } catch (_) { console.log("cleaning up cancelled promise") } } }
function deferred (ms) { let cancel, promise = new Promise((resolve, reject) => { cancel = reject; setTimeout(resolve, ms) }); return { promise, cancel } }

// dom references
const myform = document.forms.myform
const mycounter = myform.mycounter

// event handler
function clickCounter (event) {
  mycounter.value = Number(mycounter.value) + 1
}

// debounced listener
myform.myclicker.addEventListener("click", debounce(clickCounter, 1000))
<form id="myform">
<input name="myclicker" type="button" value="click" />
<output name="mycounter">0</output>
</form>

live query example, "autocomplete"

In this second example, we have a form with a text input. Our search query is attached using debounce -

// debounce, deferred
function debounce (task, ms) { let t = { promise: null, cancel: _ => void 0 }; return async (...args) => { try { t.cancel(); t = deferred(ms); await t.promise; await task(...args); } catch (_) { console.log("cleaning up cancelled promise") } } }
function deferred (ms) { let cancel, promise = new Promise((resolve, reject) => { cancel = reject; setTimeout(resolve, ms) }); return { promise, cancel } }

// dom references
const myform = document.forms.myform
const myresult = myform.myresult

// event handler
function search (event) {
  myresult.value = `Searching for: ${event.target.value}`
}

// debounced listener
myform.myquery.addEventListener("keypress", debounce(search, 1000))
<form id="myform">
<input name="myquery" placeholder="Enter a query..." />
<output name="myresult"></output>
</form>

multiple debounces, react hook useDebounce

In another Q&A someone asks if its possible to use expose the debounce cancellation mechanism and create a useDebounce React hook. Using deferred above, it's a trivial exercise.

// revised implementation
function debounce(task, ms) {
  let t = { promise: null, cancel: _ => void 0 }
  return [
   // ...,
    _ => t.cancel() // ✅ return cancellation mechanism
  ]
}
// revised usage
const [inc, cancel] = debounce(clickCounter, 1000) // ✅ two controls
myform.mybutton.addEventListener("click", inc)
myform.mycancel.addEventListener("click", cancel)

Implementing a useDebounce React hook is a breeze -

function useDebounce(task, ms) {
  const [f, cancel] = debounce(task, ms)
  useEffect(_ => cancel) // ✅ auto-cancel when component unmounts
  return [f, cancel]
}

Head over to the original Q&A for a complete demo

12
  • How come the solution works even though t is local within each function? Wouldn't t.cancel() always do nothing because t is not shared between the functions? For context, I used your snippet in my Svelte app, but the promises won't cancel (after the delay, ALL of the calls resolve). So I made the t global and it worked Still upvoted
    – Elton Lin
    Jun 15, 2022 at 14:24
  • It "works" because debounce returns a new function that is closed over t. Each debounced function you create has its own reference to t. If you make t global, you will not be able to use more than one debounce per page. The promises definitely cancel (reject) as shown in the demos above. Maybe you can share a paste of your code so I can help you diagnose the issue?
    – Mulan
    Jun 15, 2022 at 17:13
  • 1
    @EltonLin I added some notes to this answer and linked another Q&A that shows debounce in use in a more sophisticated example.
    – Mulan
    Jun 15, 2022 at 18:17
  • 1
    let cancel, promise = new Promise(...) is the same as let cancel = undefined, promise = new Promise(...) The cancel binding must be declared outside of the Promise constructor. or i could write let cancel; let promise = new Promise(...). they both do the same thing.
    – Mulan
    Feb 14, 2023 at 20:41
  • 1
    @Adnan sure you can do that, it makes next-to-zero difference. Once the promise is rejected, any attempt to resolve it is effectively ignored. Tune your implementation to your satisfaction ^_^
    – Mulan
    Mar 4, 2023 at 14:44
3

A simple debounce function:

HTML:

<button id='myid'>Click me</button>

JavaScript:

    function debounce(fn, delay) {
      let timeoutID;
      return function(...args) {
          if(timeoutID)
            clearTimeout(timeoutID);
          timeoutID = setTimeout(() => {
            fn(...args)
          }, delay);
      }
   }

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

This is a variation which always fires the debounced function the first time it is called, with more descriptively named variables:

function debounce(fn, wait = 1000) {
  let debounced = false;
  let resetDebouncedTimeout = null;
  return function(...args) {
    if (!debounced) {
      debounced = true;
      fn(...args);
      resetDebouncedTimeout = setTimeout(() => {
        debounced = false;
      }, wait);
    } else {
      clearTimeout(resetDebouncedTimeout);
      resetDebouncedTimeout = setTimeout(() => {
        debounced = false;
        fn(...args);
      }, wait);
    }
  }
};
1

You want to do the following: If you try to call a function right after another, the first should be cancelled and the new one should wait for a given timeout and then execute. So in effect you need some way of cancelling the timeout of the first function? But how? You could call the function, and pass the returning timeout-id and then pass that ID into any new functions. But the solution above is way more elegant.

It effectively makes the timeout variable available in the scope of returned function. So when a 'resize' event is fired, it does not call debounce() again, hence the timeout content is not changed (!) and is still available for the "next function call".

The key thing here is basically that we call the internal function every time we have a resize event. Perhaps it is more clear if we imagine all resize-events is in an array:

var events = ['resize', 'resize', 'resize'];
var timeout = null;
for (var i = 0; i < events.length; i++){
    if (immediate && !timeout) 
        func.apply(this, arguments);
    clearTimeout(timeout); // Does not do anything if timeout is null.
    timeout = setTimeout(function(){
        timeout = null;
        if (!immediate) 
            func.apply(this, arguments);
    }
}

You see the timeout is available to the next iteration? And there is no reason, in my opinion to rename this to content and arguments to args.

1
  • 1
    "Renaming" is absolutely necessary. The meaning of this and arguments changes inside the setTimeout() callback function. You have to keep a copy elsewhere or that info is lost. Mar 30, 2019 at 13:19
1

A simple debounce method in JavaScript:

Basic HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Debounce Method</title>
</head>
<body>
  <button type="button" id="debounce">Debounce Method</button><br />
  <span id="message"></span>
</body>
</html>

JavaScript file

var debouncebtn = document.getElementById('debounce');
  function debounce(func, delay) {
    var debounceTimer;
    return function () {
      var context = this, args = arguments;
      clearTimeout(debounceTimer);
      debounceTimer = setTimeout(function() {
        func.apply(context, args)
      }, delay);
    }
  }

Driver code

debouncebtn.addEventListener('click', debounce(function() {
    document.getElementById('message').innerHTML += '<br/> The button only triggers every 3 seconds how much every you fire an event';
  console.log('The button only triggers every 3 seconds how much every you fire an event');
}, 3000))

Runtime example JSFiddle: https://jsfiddle.net/arbaazshaikh919/d7543wqe/10/

2
  • Unfortunately I am not able to make any sense from the part args = arguments. Where do the arguments coming from? I think you need to set it as the argument of the return function
    – Sandy B
    Mar 10, 2021 at 4:38
  • This is incomprehensible: "...how much every you fire an event". Can you fix it? (But ********* without ********* "Edit:", "Update:", or similar - the answer should appear as if it was written today) Oct 19, 2022 at 22:06
1

Suppose there is a user typing a sentence on an input element at a speed of 5 characters per second, and you are listening for keyup to query an API with the partial text written by the user. To save resources, you don't want to call the API on each keystroke, but at some spaced intervals, or after some time without keystrokes is detected. This is debouncing, and is depicted in the GIF below: the input becomes red whenever the callback is triggered.

Debouncing examples

The GIF shows four different approaches:

  • No debouncing. func
  • Delay the call and cancel previous delayed calls. debounce(func, 300)
  • If possible, call immediately and delay future calls. Otherwise delay call. debounce(func, 300, { immediate: true })
  • Delayed plus some forced spaced intervals for continuous feedback in case the user types long sentences without pauses. debounce(func, 300, { interval: 1500 })

For this example, immediate=false makes more sense, but for a button, immediate=true makes more sense.

function debounce(func, delay, { immediate = false, interval = 1e30 } = {}) {
  let awaiting = false;
  let last_params, deadline_A, deadline_B = 1e30;
  async function deadlineSleep() {
    while (true) {
      if (deadline_B + delay < Date.now()) deadline_B = 1e30;
      let ms = Math.min(deadline_A, deadline_B) - Date.now();
      if (ms <= 0) return;
      await new Promise(resolve => setTimeout(resolve, ms));
    }
  }
  async function wrapper(...args) {
    last_params = { arg0: this, args };
    deadline_A = Date.now() + delay;
    if (awaiting) return;
    awaiting = true;
    if (!immediate) await deadlineSleep();
    while (last_params) {
      const { arg0, args } = last_params;
      last_params = null;
      deadline_B = Date.now() + interval;
      try { await func.apply(arg0, args); }
      catch (e) { console.error(e); }
      await deadlineSleep();
    }
    awaiting = false;
  };
  return wrapper;
}

Formally, wrapper = debounce(func, delay, {immediate, interval}) respects these rules:

  • Always call func as early as possible, with the last received parameters, while respecting the other rules.
  • If func is async, no two calls to func are running in parallel.
  • The very last call to wrapper always triggers a call to func.
  • Do not call func more than once in a window of delay ms.
  • Delay func if the last (or penultimate if immediate=true) call to wrapper was within delay ms ago. Otherwise, execute func immediately.
  • If there is a chain of delayed calls that accounts for interval ms, override the previous rule and execute func immediately.
0

Below is a summary of what a debounce function does, explained in a couple of lines with a demo.

A debounce function is a function that will:

  • at its first execution, schedule the wrapped function to execute after an interval of time with the setTimeout function
  • (if executed again during this interval):
    • delete the previous schedule (with the clearTimeOut function)
    • reschedule a new one (with the setTimeout function)

And the cycle goes on until the interval of time has elapsed and the wrapped function executes.

Adapted from all comments and from this article

function debounce(callBack, interval, leadingExecution) {

// the schedule identifier, if it's not null/undefined, a callBack function was scheduled
let timerId;

return function () {

    // Does the previous run has schedule a run
    let wasFunctionScheduled = (typeof timerId === 'number');

    // Delete the previous run (if timerId is null, it does nothing)
    clearTimeout(timerId);

    // Capture the environment (this and argument) and wraps the callback function
    let funcToDebounceThis = this, funcToDebounceArgs = arguments;
    let funcToSchedule = function () {

        // Reset/delete the schedule
        clearTimeout(timerId);
        timerId = null;

        // trailing execution happens at the end of the interval
        if (!leadingExecution) {
            // Call the original function with apply
            callBack.apply(funcToDebounceThis, funcToDebounceArgs);
        }

    }

    // Schedule a new execution at each execution
    timerId = setTimeout(funcToSchedule, interval);

    // Leading execution
    if (!wasFunctionScheduled && leadingExecution) callBack.apply(funcToDebounceThis, funcToDebounceArgs);

}

}

function onMouseMove(e) {
console.log(new Date().toLocaleString() + ": Position: x: " + e.x + ", y:" + e.y);
}

let debouncedMouseMove = debounce(onMouseMove, 500);

document.addEventListener('mousemove', debouncedMouseMove);

0

This is almost the simplest possible debounce function for html input field event handlers:

function debounce(delay) {
    let timer;
    return function(event) {
        clearTimeout(timer);
        timer = setTimeout(function(){
            console.log("my actions");
        }, delay);
    }
}
document.getElementById("input-1").addEventListener("keyup", debounce(1000));
-1

If you are using react.js

  function debounce(func, delay = 600) {
    return (args) => {
      clearTimeout(timeout.current);
      timeout.current = setTimeout(() => {
        func(args);
      }, delay);
    };
  }

  const triggerSearch = debounce(handleSearch);
  // Event which triggers search.
  onSearch={(searchedValue) => {
        setSearchedText(searchedValue);// state update
        triggerSearch(searchedValue);
      }}

Due this state update in the search event which gets triggered on each letter type, this was re-rendering, and all the code with the debounce func was also getting re initiated.

Due to this behaviour of react there was never an active timeout.

 function debounce(func, delay = 600) {
    return (args) => {
      clearTimeout(timeout.current);
      timeout.current = setTimeout(() => {
        func(args);
      }, delay);
    };
  }
 const triggerSearch = debounce(handleSearch);

To fix that i used a ref named timeout.

 const timeout = useRef();
-1

Promise-styled debounce function make code linear and clearer, so you don't have to wrap calls:

  async doSomething(params) {
    if (await debounce(this.doSomething)) return

    // doSomething...
  }

utils.js:

  export function debounce(func, delay = 100) {
    var promise = defer()
    if (func.pendingCall) {
      clearTimeout(func.pendingCall.timeout)
      func.pendingCall.promise.resolve(true)
    }
    func.pendingCall = {
      promise,
      timeout: setTimeout(_ => promise.resolve(false),  delay)
    }
    return promise
  }

export function defer() {
  var methods = {}, complete = false
  var promise = new Promise(function(resolve, reject) {
    methods.resolve = _ => {
      if (!complete) resolve(_)
      complete = true
    }
    methods.reject = _ => {
      if (!complete) reject(_)
      complete = true
    }
  })
  Object.assign(promise, methods)
  return promise
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.