js函数防抖和节流

在工作中常需要使用到函数的防抖和节流，下面就梳理一下。

1、函数防抖

      函数防抖就是将一个连续不断触发的事件，通过重置计数器的方式，让其在事件触发后的n秒内执行，如果n秒内该事件又再次被触发，那么将重新计算时间。

      应用场景：

        防抖常应用于用户进行搜索输入节约请求资源，window触发resize事件时进行防抖只触发一次。

const debounce = （fn，time）=>{
    let timer = null

    //需要返回一个函数出去，外部使用
    return function (){
        //先判断timer是否在进行中
        if（timer）{
            //进行中，清除定时器，重新计时
            clearTimer（timer ）
            timer = setTimeOut(fn,time)
        }
        else{
            timer = setTimeOut(fn,time)
        }
    }


}

2、函数节流

        函数节流是控制事件的执行频率，通过开关（计数器）的方式，将不断触发的事件，在一个周期内，每隔一个时间节点触发一次，比如：1s触发一次、2s触发一次

        应用场景：

        1、scroll事件，滚动监听事件，每隔n秒计算一次位置信息；

        2、浏览器播放事件，每隔n秒计算一次进度信息等。

const throtting = （fn,time）=>{


    //定义一个阀门并赋值为true，表示当前阀门处于打开状态，可以执行延时并触发事件
    let flag = true 

    //如果阀门处于关闭状态，表示当前正在执行延时，那么直接return当前函数 不在执行
    if（！flag）return；
    
    //否则表示阀门处于打开状态，可以执行延时并触发事件回调
    flag = false//触发新的延时之前先关闭阀门 
    setTimeOut(()=>{
        fn()//执行事件处理回调
        flag = true //执行完毕 打开阀门 将阀门处于可进行状态 好进行下一次延时 
    },time)



}