防抖:类似于王者荣耀里的回城。
节流:类似于王者荣耀里的放技能。
防抖
防抖是指事件被触发后等待一定的延迟时间,若在这期间再次触发了事件,则重新开始计算延迟时间,只有当延迟时间结束后才会执行函数。(这段描述就是代码的逻辑)
function debounce(func, wait) {
let timeout = null;
return function (...args) {
const context = this;
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(context, args);
}, wait);
};
}
节流
节流是指在规定的时间内,不管触发多少次事件,函数只会执行一次。(这段描述就是代码的逻辑)
function throttle(func, wait) {
let inThrottle = false;
return function (...args) {
const context = this;
if (!inThrottle) {
func.apply(context, args);
inThrottle = true;
setTimeout(() => {
inThrottle = false;
}, wait);
}
};
}
总结
- 防抖:类似于王者荣耀里的回城,如果在回城过程中被打断了,就要重新点击回城。
- 节流:类似于王者荣耀里的放技能,释放了当前技能,技能会处于冷却期,无法点击。
注:个人理解,仅供参考。