concept
Function debounce (debounce)
Function anti-shake means that the function can only be executed once within n seconds after the event is triggered. If the event is triggered again within n seconds, the function execution time will be recalculated .
Simply put, when an action is triggered continuously, it will only be executed for the last time.
Function throttling (throttle)
Restrict a function to be executed only once in a certain period of time.
For example, when taking the subway and passing the gates, the door closes 3 seconds after everyone enters, waiting for the next person to enter.
Application scenarios of function anti-shake
Scenarios for continuous events that only need to trigger a callback are:
- Search input in the search box. The user only needs to input the last time before sending the request
- Mobile phone number, email verification input detection
- Window size Resize. Just after the window adjustment is completed, calculate the window size. Prevent repeated rendering.
Application scenarios of function throttling
The scenarios where a callback is executed at intervals of a certain period of time are as follows:
- Scroll to load, load more or scroll to the bottom to listen
- Google search box, search association function
- High-frequency click to submit, repeated form submission