截流防抖函数

截流防抖函数经常用在频繁按钮操作，页面滚动触发，鼠标拖拽，输入查询等功能中。是为了在频繁操作中为了减少性能损耗的小技巧,这两个概念常用但是又容易混淆,下面简单的分析下防抖与截流的异同之处

 

防抖：意味着防止抖动出现的误操作，也就是防止像抖动一样的频繁操作。所以在防抖函数里会有个时间限制，当函数在一次执行之后的这个时间限制范围内是不会再次发生的，再次触发的话又要等一个时间限制的时间，代码如下

// 防抖函数：调用后在一定的时间内函数不执行，过了限时执行，在限时内再次调用会重新开启定时器
function debounce(func, delay) {
let inDebounce;
return function() {
const context = this;
const args = arguments;
clearTimeout(inDebounce); // 定时器用来执行函数
inDebounce = setTimeout(() => func.apply(context, args), delay);
};
}

 

截流：和防抖一样，也是限制在一段时间限制内频繁的操作。但是它和防抖不同的地方在于，它在每一个时间限制内会执行一次，代码如下

// 截流函数：调用后在限时内执行一次，限时内再次调用，函数执行判断条件为关闭状态，函数不执行，函数执行后判断条件打开
function throttle(func, limit) {
let inThrottle; // 开关
return function() {
const args = arguments;
const context = this;
if (!inThrottle) {
func.apply(context, args);
inThrottle = true;
setTimeout(() => {
// 定时器用来进行保证在一定时间内开关的状态
inThrottle = false;
}, limit);
}
};
}

总结：两个函数都用了定时器，但是定时器的作用不一样，防抖是用来执行函数，截流是用来改变下次函数执行的判断条件，选择用哪种，看具体应用场景而定。