节流和防抖防抖操作时不执行，确定不操作了才执行！应用举例手机一直玩时不息屏，隔一分钟不玩了才息屏。执行逻辑设定

强烈推荐：

【2分钟彻底掌握JS防抖和节流，前端面试必备知识！】www.bilibili.com/video/BV1HP…

以下是视频的文档整理。

防抖

操作时不执行，确定不操作了才执行！

应用举例

手机一直玩时不息屏，隔一分钟不玩了才息屏。

执行逻辑

设定一个定时器
一旦检测到操作就清除定时器
只有不操作了定时器才会执行完成并执行动作

代码实现

接收一个回调函数并返回回调函数

function debounce(fun){
    return function(){
        fun()
    }
}

定义一个定时器并开启定时器

function debounce(fun,delay){
    let timer
    return function(){
        timer = setTimeOut(()=>{
            fun()
        },delay)
        
    }
}

每次执行的时候都要先清除掉定时器

function debounce(fun,delay){
    let timer
    return function(){
        if(timer) clearTimeout(timer)
        timer = setTimeOut(()=>{
            fun()
        },delay)
        
    }
}

传入对应参数并改变this指向

function debounce(fun,delay){
    let timer
    return function(){
        if(timer) clearTimeout(timer)
        let args = arguments
        timer = setTimeOut(()=>{
            fun.apply(this,args)
        },delay)
        
    }
}

节流

到了时间必须执行一次

应用举例

坐公交车时，不是来了一个乘客就发一趟车，而是每隔10分钟发一趟。

执行逻辑

记录下初始执行的时间
每次执行时都要记录一下当前的时间
当前时间—初始时间，如果小于设定值则不执行
如果大于设定值则执行，并把当前时间设置为初始时间

代码实现

接收一个回调函数并执行回调函数

function throttle(fun){
    return function(){
        fun()
    }
}

定义一个初始时间，每次执行的时候获取一个当前时间，用当前时间减去初始时间，大于设定值则执行动作

function throttle(fun,time){
    let start = 0
    return function(){
        let now = new Date()
        if(now-data>time){
               fun()
            start = now //将初始时间设定为当前时间
        }
    }
}

改变this指向并传入对应参数

function throttle(fun,time){
    let start = 0
    return function(){
        let now = new Date()
        if(now-data>time){
               fun.apply(this,arguments)
            start = now //将初始时间设定为当前时间
        }
    }
}