Lodash throttling - Function not called when binded

Asked
Active3 hr before
Viewed126 times

5 Answers

function
90%

The new maxWait option (only in Lodash at the moment) is not covered in this article but it can be very useful. Actually, the throttle function is defined using _.debounce with maxWait, as you see in the lodash source code.,By using _.throttle, we don’t allow to our function to execute more than once every X milliseconds. ,The start/cancelation of rAFs it’s our responsibility, unlike .debounce or .throttle, where it’s managed internally.

Quick question about the lodash cli, once installed globally:

lodash - cli include = debounce, throttle
load more v
88%

In the debouncing technique, no matter how many times the user fires the event, the attached function will be executed only after the specified time once the user stops firing the event.,Throttling is a technique in which, no matter how many times the user fires the event, the attached function will be executed only once in a given time interval.,Thus, no matter how many letters the user types in the textbox, the debounceFunction will execute the makeAPICall method only one time after 200 milliseconds - after the user types the last letter. And that’s debouncing!

Pretag
 Pretag team - issue, fix, solve, resolve
72%

Here, func is called with the last arguments that are given to the throttled function. However, consequent calls to the throttled function return the result of the last func call.,Here, if the leading and the trailing options are true, then func is called on the trailing edge of the timeout if and only if the throttled function is called more than once throughout the wait timeout.,The _.throttle() method in lodash is used to create a throttled function that can only call the func parameter maximally once per every wait milliseconds. The throttled function here has a cancel method which is used to cancel func calls that are delayed and it also has a flush method which is used to immediately call that delayed func. Moreover, it provides some options which are used to imply whether the func stated should be called on the leading and/or the trailing edge of the wait timeout.

Syntax:

_.throttle(func, wait, options)

Output: Here, after the function is throttled after 1000ms as the waiting time here is 1000ms.

Function throttled after 1000 ms!

Output: So, here the loop doesn’t stop until you stop it manually.

Function throttled after 1000 ms!
   Function throttled after 1000 ms!
   Function throttled after 1000 ms!
   Function throttled after 1000 ms!
   Function throttled after 1000 ms!
   Function throttled after 1000 ms!
   .
   .
   .
   .
// So on until you stop it manually.

Output:

Function is called on the trailing edge of the
timeout and throttled after 2000 ms!
load more v
65%

This reads as: whenever the button is clicked, execute the throwBall() function. The details of throwBall function are not important, as it represents any logic bound to an event.,Hinges are tightened and the screws are steady—let's put our ingenious invention to the test!,A debounced function is called after N amount of time passes since its last call. It reacts to a seemingly resolved state and implies a delay between the event and the handler function call.

1 target.addEventListener(eventName, handler, options)
load more v
75%

Solution for those who came here because throttle / debounce doesn't work with FunctionComponent - you need to store debounced function via useRef():,useCallback makes use of the function returned by debounce and works as expected. Although, this is a bit more complicated when you want to use state variables inside the debounced function (Which is usually the case).,For a React functional component, debounce does not work by default. You will have to do the following for it to work:

The problem occurs because you aren't calling the debounce function, you could do in the following manner

export default class componentName extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: this.props.value || null
    }
    this.servicesValue = _.debounce(this.servicesValue, 1000);
  }

  onChange(value) {
    this.setState({ value });
    this.servicesValue(value);
  }
  servicesValue = (value) => {
      Services.setValue(value)
  }
  render() {
    return (
      <div>
        <input 
          onChange={(event, value) => this.onChange(value)}
          value={this.state.value}
        />
      </div>
    )
  }
}
load more v

Other "function-undefined" queries related to "Lodash throttling - Function not called when binded"