Difference Between Throttling and Debouncing a Function

Difference between throttle and debounce in lodash

The lodash docs link to the article Debouncing and Throttling Explained Through Examples.

From that article:

The Debounce technique allow us to "group" multiple sequential calls in a single one.

debounce

By using _.throttle, we don't allow to our function to execute more than once every X milliseconds.

The main difference between this and debouncing is that throttle guarantees the execution of the function regularly, at least every X milliseconds.

The article explains the differences clearly using prose and diagrams.

What's the difference between throttle and debounce in Rxswift3.0?

In earlier versions of RxSwift, throttle and debounce did the same thing, which is why you will see articles stating this. In RxSwift 3.0 they do a similar but opposite thing.

Both debounce and throttle are used to filter items emitted by an observable over time.

throttle emits only the first item emitted by the source observable in the time window.
debounce only emits an item after the specified time period has passed without another item being emitted by the source observable.

Both can be used to reduce the number of items emitted by an observable; which one you use depends on whether you want the "first" or "last" value emitted in a time period.

The term "debounce" comes from electronics and refers to the tendency of switch contacts to "bounce" between on and off very quickly when a switching action occurs. You won't notice this when you turn on a lightbulb but a microprocessor looking at an input thousands of times a second will see a rapid sequence of "ons" and "offs" before the switch settles into its final state. This is why debounce gives you the value of 5; the final item that was emitted in your time frame (1 ms). If you put a time delay into your code so that the items were emitted more slowly (more than 1ms apart) you would see a number of items emitted by debounce.

In an app you could use debounce for performing a search that is expensive (say it requires a network operation). The user is going to type a number of characters characters for their search string but you don't want to initiate a search as they enter each character, since the search is expensive and the earlier results will be obsolete by the time they return. Using debounce you can ensure that the search string is only emitted once the user stops typing for a period (say 500ms).

You might use throttle where an operation takes some time and you want to ignore further input until that time has elapsed. Say you have a button that initiates an operation. If the user taps the button multiple times in quick succession you only want to initiate the operation once. You can use throttle to ignore the subsequent taps within a specified time window. debounce could also work but would introduce a delay before the action item was emitted, while throttle allows you to react to the first action and ignore the rest.

Throttle & debounce functions

Yes, that's a good synopsis of the differences.

However, you might want to emphasize that these methods don't actually alter the functions they are called upon. They just create a new function (with an identity, to which the rate limiting behaviour is bound) that can be called as often as necessary, and internally relays the calls to the debounced or throttled function.

Lodash debounce firing every change

I believe what's happening here is that each key press causes a re-render, and during each render it's creating a new debouncedSubmit function, and each of those is firing. Try using React's useCallback method to memoize the function so it's not recreated on re-renders:

const debouncedSubmit = useCallback(debounce(() => dispatch(new TaskAnswerSubmit({index: props.index, text: answer})), 1000), []);

Javascript debouncing and throttling on Window resize

Here you go, fiddle exmple:

function doSomething(timer) {
  timer = timer || 1000;
  var alreadyFired;
  var timerID = null;
  var interruptCounter = -100;
  var fireLimit = 5;
  var fired = 0;

  function Debounce() { //Old way, how I understood you inititally
    if (alreadyFired != true) {
      alreadyFired = true;
      //Do stuff
      console.log("fired");
      setTimeout(function() {
        alreadyFired = false;
      }, 1000); // Debouncing on 1 second
    }
  }

  function ConstantFiring(firstIndicator) { // New way, as per comments.
    //Do stuff
    if (firstIndicator === true) {
      console.log("fired for the 1st time");
    } else {
      console.log("Firing constantly every " + timer / 1000 + " seconds.");
    }
  }

  function Throttle() {
    if (fired < fireLimit) {
      fired++;
      //Do Stuff
      console.log(fired);
      setTimeout(function() {
        fired--;
      }, 3000); //Throttling on 5 fires per 3 seconds
    }
  }

  function InterruptTimer() {
    if (interruptCounter === -100) {
      //This runs only the 1st time window is resized, if you leave this
      //part out, the function will only fire 3 seconds AFTER the first
      //event fired and then consistantly unless the event occured in 
      //last 3 seconds.
      interruptCounter = 0;
      ConstantFiring(true);
    }
    if (interruptCounter <= 0) {
      interruptCounter++;
      clearInterval(timerID);
      timerID = null;
      setTimeout(function() {
        interruptCounter--;
        if (interruptCounter <= 0 && timerID == null) {
          timerID = setInterval(ConstantFiring, timer);
        }
      }, 3000); // Interrupt timer
    }
  }

  //Change the following line to use a different function to test.
  var realFunction = InterruptTimer;
  return realFunction;
}

window.onresize = doSomething(768); //Add a parameter representing a 
                                    //period for the function timer (in milisec) 
                                    //This is very optional, you can also hardcode
                                    // it into the doSomething fucntion in case
                                    // you want to add some other event.[parameter].

EDIT: Would also like to add that using a simple Global variable as an indicator is a much simpler solution, less confusing, but less "clean" from a "proper coding" type of view. If you do that then you don't have to deal with closures.

EDIT2: Updated the code and the link to reflect the desired behavior from the comments.

How to use throttle or debounce with React Hook?

After some time passed I'm sure it's much easier to handle things by your own with setTimeout/clearTimeout(and moving that into separate custom hook) than working with functional helpers. Handling later one creates additional challenges right after we apply that to useCallback that can be recreated because of dependency change but we don't want to reset delay running.

original answer below

you may(and probably need) useRef to store value between renders. Just like it's suggested for timers

Something like that

const App = () => {
  const [value, setValue] = useState(0)
  const throttled = useRef(throttle((newValue) => console.log(newValue), 1000))

  useEffect(() => throttled.current(value), [value])

  return (
    <button onClick={() => setValue(value + 1)}>{value}</button>
  )
}

As for useCallback:

It may work too as

const throttled = useCallback(throttle(newValue => console.log(newValue), 1000), []);

But if we try to recreate callback once value is changed:

const throttled = useCallback(throttle(() => console.log(value), 1000), [value]);

we may find it does not delay execution: once value is changed callback is immediately re-created and executed.

So I see useCallback in case of delayed run does not provide significant advantage. It's up to you.

[UPD] initially it was

  const throttled = useRef(throttle(() => console.log(value), 1000))

  useEffect(throttled.current, [value])

but that way throttled.current has bound to initial value(of 0) by closure. So it was never changed even on next renders.

So be careful while pushing functions into useRef because of closure feature.

I have a button that increment a counter when users click on it, but I want to delay the updating process if users click really fast

You need to apply Javascript Throttle function. Debounce is not an ideal solution here because with Debounce even after the first click user will have to wait for some time(delay) before execution happens. What you want is that on the first click counter should be incremented but after that if user clicks too fast it should not happen untill some delay ,that what Throttle function provides.

Also Thing to note that to use Throttle or Debounce in React application you will need an additional hook i.e. useCallback, which will not redfeine the function on every re-render and gives a memoized function.

More on difference between Throttle and Debounce :https://stackoverflow.com/questions/25991367/difference-between-throttling-and-debouncing-a-function#:~:text=Throttle%3A%20the%20original%20function%20will,function%20after%20a%20specified%20period.

Let's look at the code :

import { useState, useCallback } from "react";

function App() {
  // State to store count value
  const [count, setCount] = useState(0);

  // Throttle Function
  const throttle = (func, limit = 1000) => {
    let inThrottle = null;
    return (...args) => {
      if (!inThrottle) {
        func.apply(this, args);
        inThrottle = true;
        setTimeout(() => (inThrottle = false), limit);
      }
    };
  };

  // Function to increment count by 1
  const incrementCount = useCallback(
    throttle(() => {
      // Update state with incremented value
      setCount((prev) => {
        return prev + 1;
      });
    }, 1000),
    []
  );

  return (
    <div className="app">
      <button onClick={incrementCount}>Click Here</button>
      {count}
    </div>
  );
}

export default App;