js防抖和节流

概念

函数防抖(debounce)：触发高频事件后n秒内函数只会执行一次，n秒内高频事件再次触发，重新计算时间

函数节流(throttle)：高频事件触发，n秒内只会执行一次，会稀释函数执行的频率

函数防抖和函数节流都是为了限制函数执行的频率，以此优化函数高频触发导致响应速度跟不上触发的频率，避免出现延迟，卡顿，假死的现象

实现

函数防抖

实现：每次触发事件时设置一个延迟调用的方法，并取消之前的延迟调用方法

缺点：如果事件在规定时间的间隔内不断触发，则调用的方法会不断的延迟

function debounce(fn, delay) {
  let timeout = null
  return function(e) {
    clearTimeout(timeout)
    timeout = setTimeout(() => {
      fn.apply(this, arguments)
    }, delay)
  }
}

function handle() {
    console.log('debounce')
}

函数节流

实现：每次触发事件时，如果有等待执行的延迟函数，直接return

function throttle(fn, delay) {
  let flag = true
  return function() {
    if (!flag) return
    flag = false
    setTimeout(() => { 
      fn.apply(this, arguments)
      flag = true
    }, delay)
  }
}
 
function handle() {
    console.log('throttle')
}

总结

函数防抖：将多次操作合并为一次操作，如果在规定的时间内再次触发，将会取消之前的计时器并重新设置，最后只会有一次操作能够被触发

函数节流：一定时间内只触发一次函数，通过判断的形式决定是否需要执行延迟函数

函数节流不管事件触发多少次，都会保证在规定的时间内一定会执行一次事件处理函数，而函数防抖只会在最后一次事件后执行一次事件处理函数