Differences of _.throttle and _.debounce in Underscore.js

Underscore.js is a very lean library, only 5.2KB after compression. It provides dozens of functional programming methods to compensate for the shortcomings of the standard library and greatly facilitates the programming of JavaScript.

The usual function (or method) invocation process is divided into three parts: request, execute, and response. (In the text "request" and "call" synonymous, "response" and "return" synonymous, in order to better express, deliberately use the claim and response. ）

In some scenarios, such as events that respond to mouse movements or window resizing, the trigger frequency is high. If the slightly complex processing function, the need for more computation execution time, the response speed can not keep up with the trigger frequency, often there will be delays, resulting in suspended animation or a sense of Kaka.

When computing resources are not enough, the most intuitive solution is to upgrade the hardware, admittedly, through the purchase of better hardware can solve some problems, but also need to pay a high cost. In particular, the client and server models require the client to upgrade the hardware basically impossible.

With limited resources, processing functions cannot respond to high-frequency calls in real time. Second, is it possible to respond only to part of the request? Dense requests under certain scenarios have strong homogeneity and continuity. For example, the trajectory parameter of the mouse movement. The more timely the response, the smoother the effect, but if the response is not as fast as it should be, it will appear to be a bit more smooth if the appropriate discard some requests.

throttleAnd debounce is a solution to the request and response speed mismatch problem of two scenarios. The difference between the two is to choose a different strategy.

Elevator timeout

Imagine the elevator underneath the office building every day. The elevator is delivered once, analogous to the execution and response of a function. Assume that the elevator has two operating strategies throttle and debounce that the timeout is set to 15 seconds, regardless of the capacity limit.

• throttleStrategy of the elevator. Ensure that if the elevator first person comes in, 15 seconds after delivery on time, do not wait. If there is no one, then standby.
• debounceStrategy of the elevator. If someone comes in the elevator, wait 15 seconds. If another person comes in, 15 seconds waits for a re-timer until 15 seconds expires and the shipment begins.

Differences of _.throttle and _.debounce in Underscore.js