谈谈手写节流防抖的里面的关键点

手写节流和防抖，由于其本身不算很简单，需要一定的知识积累，也就成了很多面试官筛选候选人的一种考察方式了。这两个概念也比较接近，但是我个人觉得这并不是什么“故弄玄虚”，相反这种比较学习法更能加深对知识本身的理解很认真。

话不多说，先来看看防抖和节流是用来干嘛的？

防抖：防止事件多次触发，也就是转化多次触发为一次触发。举个例子，用户框输入的时候，等到用户输入暂停（代表输入完成）后隔一段事件才会触发onChange事件。

节流：如果你持续触发事件，则就会定期每隔一段时间触发一次。比如咱们的拖拽事件。

上防抖代码。

//防抖代码段
function debounce(fn,delay=500){
    let timer=null                  //声明一个定时器
    return function(){
        if(timer){
            clearTimeout(timer)     //如果一直触发，那么timer就一直被清空
        }
        timer=setTimeout(()=>{
            fn.apply(this,arguments)
            timer=null              //执行完之后还要释放定时器
        },delay)
    }
}

input.addEventListener("keyup",debounce(function(){console.log(input.value)}),600)//事件绑定

上节流代码。

//节流代码片段
function throttle(fn,delay=100){
    let timer=null              //和防抖类似的初始逻辑
    return function(){
        if(timer){
            return              //直接返回就行
        }
        timer=setTimeout(()=>{
            fn.apply(this,arguments)
            timer=null
        },delay)
    }
}

div.addEventListener("drag",throttle(function(e){console.log(e.offsetX,e.offsetY)})) //事件绑定

可以看见，其实代码逻辑差不多，几个点可以解释一下。arguments保留着是为了方便函数传参。防抖里面有timer就清空，节流里面有timer直接返回，因为防抖是相对于最后一次事件的，节流是定期执行的。

我个人感觉最关健的点就是在事件绑定中，debounce和throttle返回的才是真正的事件绑定函数！timer相当于就是在闭包里面了。

理解了这一点，那么节流防抖的逻辑应该就不是问题了。