Divided into text version and mind map version (at the end of the article)
1. Anti-shake
1. Meaning
When the event is triggered n seconds later, the callback is executed, and if it is triggered again within n seconds, the timing is restarted.
2. Usage scenarios
- The association function of the search input box will send the request a few hundred milliseconds after no more input, reducing the pressure on the server.
- Constantly changing the size of the browser window to resize, causing browser rearrangement and consuming performance
3. Function implementation
function debounce(func, delay) {
let timer;
return function () {
let context = this;
let args = arguments;
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function () {
func.apply(context, args);
// 其实就是 context.func(args)
}, delay);
};
}
Two, throttling
1. Meaning
It is stipulated that the function can only be triggered once in a unit time, and if it is triggered multiple times in a unit time, it will only be executed once.
2. Usage scenarios
- Monitor scrolling events, such as whether to slide to the bottom to automatically load more, use throttle to judge
- The mouse is clicked continuously to trigger, mousedown (triggered only once per unit time)
3. Function implementation
(1) Timestamp
function throttle(fn, wait) {
var args;
// 前一次执行的时间戳
var previous = 0;
return function() {
// 将时间转为时间戳
var now = +new Date();
args = arguments;
// 时间间隔大于延迟时间才执行
if (now - previous > wait) {
fn.apply(this, args);
previous = now;
}
};
}
(2) Timer
function throttle(fn, wait) {
var timer, context, args;
return function() {
context = this;
args = arguments;
// 如果定时器存在，则不执行
if (!timer) {
timer = setTimeout(function() {
// 执行后释放定时器变量
timer = null;
fn.apply(context, args);
}, wait);
}
};
}
4. Expand
Function implementation: I don’t want to wait until the event stops triggering to execute, I want to execute the function immediately, and then wait until the stop triggering n seconds before re-triggering the execution
function debounce(func, wait, immediate) {
var timeout, result;
return function () {
var context = this;
var args = arguments;
if (timeout) {
clearTimeout(timeout);
}
if (immediate) {
// 如果已经执行过，不再执行
var callNow = !timeout;
timeout = setTimeout(function(){
timeout = null;
}, wait)
if (callNow) {
result = func.apply(context, args)
}
}
else {
timeout = setTimeout(function(){
func.apply(context, args)
}, wait);
}
return result;
}
}
3. Comparison
1. the same
- The essential purpose is to save the performance of the program (to prevent high-frequency function calls)
- Both use the characteristics of closures to cache variables (states)
- Both can be achieved using setTimeout
2. different
The focus is different: anti-shake focuses on stability and can only be executed once, while throttling emphasizes limiting the number of times in a cycle, that is, the execution frequency, and does not limit the total number of times in all time
4. lodash
lodash Chinese documentation
https://www.lodashjs.com/docs/lodash.debounce
https://www.lodashjs.com/docs/lodash.throttle
mind Mapping
Reference article link
https://juejin.cn/post/6893748375372431368#heading-1
https://juejin.cn/post/6844903752063778830#heading-2
https://juejin.cn/post/6844903795420299278