通俗易懂的防抖和节流

1.防抖

相信大家都有遇到过这种情况，在搜索框输入停下一小段时间后，会刷新联想词汇，然而在连续输入的时候却不会刷新，没错，这就是防抖的应用。

防抖就是事件被触发n秒后执行回调，如果在这n秒内又被触发，则重新计时；

防抖函数实现：

function Debounce(fn,t){
    let timer = null;
    return function(){
        if(timer) clearTimeout(timer);
        timer = setTimeout(()=>{
            fn.apply(this,arguments);  //使用apply传递事件参数给fn
        },t)
    }
}
//应用
document.onclick = Debounce(function(e){
    console.log(e) 	//输出事件对象
},1000)

2.节流

哒哒哒的射击游戏有没有玩过，别想了，你肯定玩过（嘿嘿）；你可以把节流这样理解：节流的就好比使用手枪的射击时，不管你点击射击的频率有多快，手枪的射速也不会超过射速阈值。这是我个人理解，我觉得很通俗啦！

再来看看节流定义：在一个单位事件内，只能触发一次行为，如果在这个单位事件内多次触发行为，只有一次生效;

节流函数的实现：

function throttle(fn,t){
    let timer = null;
    return function () {
        if(!timer){
            timer = setTimeOut(()=>{
                timer = null;
                fn.apply(this,arguments)
            },t)
        }
	}
}
//使用
document.onclick = throttle(function(e){
    console.log(e) 	//输出事件对象
},1000)