随笔分类

随笔档案

阅读排行榜

一、函数防抖

防抖

防抖、节流使用的闭包，一个页面调用多次防抖节流，独立空间

防抖概念：用户触发事件过于频繁，只需要处理最后一次事件的操作

 function debounce(fn, delay){
                let timer = null;
                return function(){
                    if(timer){
                        clearTimeout(timer)
                        timer = setTimeOut(fn, delay)
                    }else{
                        timer = setTimeOut(fn, delay)
                    }
                }
            }

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

闭包的优点：

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);//一定时间内只执行一次  
    }
}

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

区别：

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

首先知道闭包的有一个作用就是可以使父级函数的内部环境在变量中一直存在。参考这个
比如有个业务使用了debounce函数，用闭包后，对于该业务，timer将会一直存在，如果不用闭包，每次触发将会生成一个新的time，if (timer)将永远不会被触发。
如果此时又有一个业务使用了debounce，用闭包的情况下，会为这个新的业务生成一个新的timer