javascript手写 防抖 节流

防抖（debounce）：

触发事件后延迟执行函数，若期间再次触发，则重置计时，只在最后一次触发后等待完成才执行一次。

举例：连续输入搜索框，停下之后才发请求

防抖基本实现

function debounce(fn,delay){
    //定义一个定时器，保存上一次的定时器
    let timer = null
    //执行真正的函数
    const _debounce = function() {
        //取消上一次的定时器
        if (timer) clearTimeout(timer)
        //延迟执行
        timer = setTimeout(() => {
          //外部传入真正要执行的函数
          fn()
        }, delay)
    }
    //封装取消功能
    _debounce.cancel = function() {
      if (timer) clearTimeout(timer)
    }
    return _debounce
}

节流（throttle）

规定一段时间内，函数最多只能执行一次，不管中间触发多少次事件。

举例：滚动页面，每隔固定时间计算一次位置。

节流基本实现

function throttle(fn, interval){
    //记录上一次的开始时间
    let lastTime = 0
    //事件触发时，真正执行的函数
    const _throttle = function(){
        //触发事件当前的时间
        const nowTime = new Date().getTime() 
        //计算出还剩余多长时间去触发函数
        const remainTime = interval - (nowTime - lastTime)
        if (remainTime <= 0) { //说明已经超过间隔了，可以立刻执行
            //真正触发函数
            fn()
            lastTime = nowTime//更新时间
        }
    }
    _throttle.cancel = function() {
        if(timer) clearTimeout(timer)
        timer = null
        lastTime = 0
    }
    return _throttle
}