闭包实现防抖与节流

一、闭包

闭包定义：闭包是一种形式，即函数嵌套函数。其涉及两个原理，一个是全局与局部作用域；二是浏览器垃圾回收机制；在嵌套函数中，内部函数可以访问外部函数定义的变量，而被引用的变量不会被垃圾回收机制回收，可用于实现一个纯净的全局私有变量。

闭包的优点：

1.可重复使用变量（全局变量的优点），不会造成变量污染（局部变量的优点）。闭包结合了全局变量合局部变量的优点。

2.可以用于定义私有属性和私有方法。

闭包缺点：

比普通函数更占用内存，会导致网页性能下降，在IE下易造成内存泄露。

闭包应用场景：

防抖、节流、函数柯里化等；防抖、节流属于性能优化方面的知识，可防止浏览器卡死，

二、防抖

问题：先提一下函数执行频率问题，有些事件的触发会导致函数的执行频率非常高，比例监听页面滚动，鼠标移动点击等。函数执行频率高会导致浏览器的性能下降。

解决思路：

1.在第一次事件触发时，不立即执行函数，而是设定一个期限值；

2.若在期限值内，事件没有再次被触发，则执行函数；

若在期限值内，事件被再次触发，则清除当前计时器，重新开始记时。

实现：由于要用到计时，所以可以用闭包和setTimeOut()函数实现防抖功能；

/*
* foo [function] 需要防抖的函数
* delay [number] 毫秒，防抖期限值
*/
 
function debounce(foo,delay){
     let timer = null
     return function(){
        if(timer){ 
           clearTimeout(timer)//触发了相同事件，取消当前计时，重新开始计时
        }
        timer = setTimeout(foo,delay);//第一次执行，开始一个计时器  
    }
}
 
//clearTimeout 阻止 setTimeout() 方法执行函数

效果：限制函数的执行频率，在期限时间内即使触发大量事件时，也只执行一次事件处理函数。

三、节流

问题：对于搜索框的input事件，如何实现输入时支持实时搜索，即每间隔一段时间就必须查询相关内容。对于游戏技能的使用，必须等技能冷却完后才可以使用。

解决思路：

1.在第一次事件触发时，立即执行函数，并且设定一个期限值，在期限值内，该函数不再执行；

2.过了期限后，该函数才能再次执行；

实现：设置一个标志位用于标记函数是否可以执行；

/*
* foo [function] 需要节流的函数
* delay [number] 毫秒，节流期限值
*/
 
function debounce(foo,delay){
     let timer = null
     return function(){
        if(timer){ 
           return false;//定时器还在，等冷却时间
        }
        timer = setTimeout(()=>{
            foo();
            clearTimeout(timer);//函数执行完后清除定时器,表示冷却完成
        },delay);//一定时间内只执行一次  
    }
}

效果：规定一定时间内执行一次函数，若事件一直在触发，事件函数在规定时间内必定会执行一次。

区别：

防抖必须等最后一次触发事件后才能执行事件函数，而节流是规定时间内必定会执行一次且只执行一次事件函数。