防抖(Debounce)和节流(Throttle)

防抖和节流都是用来控制某个函数在一定时间内执行多少次的技巧，两者相似而又不同。

防抖

如果下达该命令后，在t毫秒内再次下达该命令，则取消刚刚下达的命令，只执行新命令
最终效果：对于 连续动作（动作间的时间间隔小于t），以最后一次为准

范例

先声明一个定时器
监听body的scroll事件
一旦事件触发，先判断定时器是否被定义
创建定时器
scroll事件再次触发时，先清除之前的定时器，再创建新的定时器
只要两次事件的触发间隔在200毫秒之内，则只会输出一次异步的结果

let command
let n = 0

document.body.onscroll = ()=>{
  console.log('这里每次都执行')
  if(command){
    clearTimeout(command)
  }
  command = setTimeout(()=>{
    n++
    console.log('debounce')
  },200)
}

封装

function debounce(fn ,wait){
    let timer = null
    return function(){
        if(timer){
            clearTimeout(timer)
        }
        timer = setTimeout(()=>fn.call(this,arguments),wait)
    }
}

let = fn = ()=> console.log('debounce')
fn = debounce(fn , 200)

document.body.onscroll = fn

节流

从上一次命令结束开始的一定时间范围t内，如果多次连续下达命令，则执行当前时间段t内第一次命令
最终效果：对于连续动作，会过滤出部分动作，让这些过滤后的动作之间的执行间隔大于等于t

范例

声明间隔时间gapTime
上次执行时间lastTime
这次执行时间nowTime
当scroll事件触发时，先获取这次执行的时间
判断有没有lastTime，没有则说明是第一次执行，立即执行代码块；若有，则判断此次与上次的时间间隔是否大于gapTime,大于则执行代码块，否则不执行，等到触发事件的时间间隔大于gapTime时才执行。

let gapTime = 1000
let lastTime = null
let nowTime = null
let fn = () =>{console.log('throttle')}

document.body.onscroll = () =>{
    nowTime = Data.now()
    if(!lastTime || nowTime - lastTime > gapTIme){
        fn()
        lastTime = nowTime
    }
}

封装

function throttle(fn, gapTime){
    let lastTime = null
    let nowTime = null
    return function(){
        nowTime = Data.now()
        if(!lastTime || nowTime - lastTime > gapTIme){
            fn.call(this,arguments)
            lastTime = nowTime
        }
    }
}

let fn = ()=>console.log('throttle')
fn = throttle(fn, 1000)

document.body.onscroll = fn