JS防抖与节流

防抖

在设定的时间内触发一次事件，会在设定的时间结束之后执行该事件处理程序，如果在设定的时间内多次触发事件，则每次触发事件都会重新计时。

简单理解就是：单位时间内，频繁触发一个事件，只执行最后一次。

  const inputElement = document.querySelector('.inputElement')
  inputElement.oninput = debounce(getData, 500)
  
  function debounce(fn, delay){ // 通过闭包来封装节流函数
    let timer = null
    return function(){
      if(timer){
        clearTimeout(timer)
      }
      timer = setTimeout(() => {
        fn.call(this)
      }, delay);
    }
  }

  function getData(){ // 模拟请求数据
    setTimeout(()=>{
     console.log(`请求数据:${this.value}`);
    }, 200)
  }

节流

在设定的时间内触发一次事件，会在设定的时间结束之后执行该事件处理程序，在设定的时间内多次触发事件，只会在设定的时间结束后执行一次。

简单理解就是：单位时间内，频繁触发一个事件，减少执行次数。

window.onscroll = throttle(getData, 500)

function throttle(fn, delay){ // 封装节流函数
  let flag = true
  return function($event){
    if(flag){
      setTimeout(() => {
        fn($event)
        flag = true
      }, delay)
    }
    flag = false
  }
}

function getData(e){
  console.log(e) // 模拟业务逻辑
}