作者：只与明月听
链接：https://juejin.cn/post/7030787304696315918
来源：稀土掘金
防抖节流是开发中用的比较多的两个工具函数了，可以避免函数在短时间内大量调用。一般情况下我们可以直接使用 lodash 的防抖节流函数，下面是两种防抖节流的 JavaScript 实现。
防抖
在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
function debounce(func, wait) {
var timeout;
return function () {
var context = this;
var args = arguments;
clearTimeout(timeout)
timeout = setTimeout(function(){
func.apply(context, args)
}, wait);
}
}
节流
规定在一个单位时间内，只能触发一次函数。如果这个函数单位时间内触发多次函数，只有一次生效。
function throttle(func, wait) {
var timeout, context, args, result;
var previous = 0;
var later = function() {
previous = +new Date();
timeout = null;
func.apply(context, args)
};
var throttled = function() {
var now = +new Date();
//下次触发 func 剩余的时间
var remaining = wait - (now - previous);
context = this;
args = arguments;
// 如果没有剩余的时间了或者你改了系统时间
if (remaining <= 0 || remaining > wait) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
previous = now;
func.apply(context, args);
} else if (!timeout) {
timeout = setTimeout(later, remaining);
}
};
return throttled;
}
