防抖和节流的概念以及实现

概念

使用监听滚动，或者鼠标移动这样的频繁触发的事件，可能会导致页面卡顿或者假死，所以针对这种高频触发的事件的问题，有两种解决方案，节流和防抖
防抖：触发高频事件以后，会延迟一段时间以后再执行，如果这个期间又触发了该事件，就会重新计算时间
节流：当高频事件触发的时候，n秒只执行一次

实现

防抖实现思想：设定一个高频事件触发的开始时间，设置每次过一段时间后就把this重新绑定，也就是重新绑定这个函数，如果在n秒内就清除计时器，重新计算触发开始时间，反之也重新绑定函数

window.onmousemove = debounce(fun, 100)
function debounce(callback, time) {
    
    
  let timeStamp = 0
  let timer = null
  let content, args

  let run = () => {
    
    
    timer = setTimeout(() => {
    
    
      callback.apply(context, args)
    }, time)
  }

  return function () {
    
    
    context = this
    args = arguments
    let now = (new Date()).getTime()

    if(now - timeStamp < time) {
    
    
      clearTimeout(timer)
      run()
    } else {
    
    
      run()
    }
    timeStamp = now
  }
}

function fun() {
    
    
  console.log('哈哈哈')
}

节流的实现就是，当触发事件的时候，设置一个定时器，如果在周期内再次触发事件，就忽略，等到时间执行完函数，就把定时器删了

  function fun() {
    
    
    console.log('哈哈哈')
  }

  function throttle(callback, delay) {
    
    
    let timer = null
    let context, args

    let run = () => {
    
    
      timer = setTimeout(() => {
    
    
        fun.apply(context, args)
        clearTimeout(timer)
        timer = null
      }, delay)
    }

    return function() {
    
    
      context = this
      args = arguments
      if(!timer) {
    
    
        run()
      }
    }
  }

  window.onmousemove = throttle(fun, 500)

其他扩展

匿名函数作用：避免污染全局变量
apply和call改变函数内部的指向，区别是参数数量不一样