js手写题——防抖和节流

在开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。

通常这种情况下我们怎么去解决的呢？一般来讲，防抖和节流是比较好的解决方案。

防抖：指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

/**
 * @desc 防抖函数
 * @param {Function} fn 函数
 * @param {Number} delay 延迟执行毫秒数
 *
 */
export function debounce(fn, delay){
  let timer;
  return function(){
    let args = arguments;
    timer && clearTimeout(timer)

    timer = setTimeout(()=>{
      fn.apply(this, args)
    },delay)
  }
}
//使用
task(){
  console.log('防抖')
}

let box = document.querySelector('.MapContainer')
box.onmousemove = debounce(this.task,2000)//停止触发后，在delay秒内执行一次

节流：指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。

/**
 * @desc 节流函数
 * @param {*} fn 函数
 * @param {*} delay 延迟执行毫秒数
 */
export function thnottle(fn, delay){
  let last = 0;
  return function(){
    let _this = this
    let arg = arguments
    
    let now = Date.now()
    if(now - last > delay){
      fn.apply(_this, arg)
      last = now
    }
  }
}

//使用
task(){
  console.log('节流')
}

let box = document.querySelector('.MapContainer')
box.onmousemove = debounce(this.task,2000)//连续触发时，在delay秒内只执行一次

参考：https://juejin.cn/post/7031322059414175774