函数防抖与节流及闭包实现封装

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情

防抖和节流本质上都是控制事件执行的频率，但是触发事件的时机本质上有区别，防抖是在用户多次触发事件，当用户停止触发事件，将事件执行一次；节流是用户多次触发事件，会在多次触发的过程中，间隔执行事件。 

函数防抖 

简述：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。（用户多次触发事件，在用户一直触发事件中，事件不会执行，只有在用户停止触发事件一段时间之后再执行这个事件一次。）

//函数防抖
        let timer = null;
        window.onscroll = function(){
            if(timer !== null){
                clearTimeout(timer);
            }
            timer = setTimeout(() => {
                console.log('hello world');//业务代码
                timer = null;
            },500)
        }

函数节流

简述：当持续触发事件时，保证一定时间段内只调用一次事件处理函数，一件事如果执行的频率非常快，节流就是把频率降至指定的值。（用户多次触发事件，在用户一直触发事件过程中事件会每间隔一段时间执行一次，会执行多次）

//函数节流
let mark = true;
        window.onscroll = function () {
            if (mark) {
                setTimeout(() => {
                    console.log('Hello world');//业务代码
                    mark = true;
                }, 500)
                mark = false;
            }
        }

闭包 

闭包就是在函数内部可以访问到函数外部的参数和变量的组合，是指有权访问另一个函数作用域中的变量的函数，闭包的本质就是在一个函数内部创建另一个函数。 

特性 函数嵌套函数，被嵌套函数就是一个闭包，它会被return出去 函数内部可以引用函数外部的参数和变量 参数和变量不会被垃圾回收机制回收

优缺点 1、保护函数内部的变量安全，实现封装 2、可以把这个变量当作缓存来使用 3、无法销毁变量，使用不当，容易造成内存泄漏

//闭包            
            let m =10;
            let n =20;
            function debounce(){
                function eventFun(){
                    return m + n;//业务代码
                }
                return eventFun()
            }
 
            const f1 = debounce();//f1就是eventFun()执行你的业务代码函数

闭包实现封装节流和防抖

封装防抖

//封装防抖
         function debounce(fn){
            let timer = null;
            function eventFun(){
               if(timer != null){
                   clearTimeout(timer)
               } 
               timer = setTimeout(() => {
                   fn();
                   timer = null;
               },500)
            }
            return eventFun
        }
 
 
        window.onscroll = debounce(() => {
            console.log('Hello world') //业务代码
        })

封装节流

//封装节流   
            function debounce(fn) {
            let mark = true;
            function eventFun() {
                if (mark) {
                    setTimeout(() => {
                        fn();
                        mark = true;
                    }, 500)
                    
                }
                 mark = false;
            }
            return eventFun
        }
 
 
        window.onscroll = debounce(() => {
            console.log('Hello world')//业务代码
        })

闭包 > 计时器 > 防抖节流 > 实现闭包封装防抖节流