防抖和节流

防抖：在一个时间段内事件被触发一次，如果在这个时间段内事件被再次触发则会被重新计时

常用于避免短时间内频繁触发的事件处理

应用：搜索框联想降低请求频率、窗口缩放window.onresize停止变化后处理事件、避免登录按钮多次点击的重复提交

节流：在一个时间段内多次触发时间只会执行一次

应用：降低滚动事件监听频率，比如在滚动过程中动态加载数据

// 防抖
function debounce(fn, delay) {
  let timer;
  return function(...args) {
    if(timer) { clearTimeout(timer) }
    timer = setTimeout(()=>{
      fn.call(this, ...args);
      timer = null;
    },delay)
  }
}
// 节流
function throttle(fn,delay) {
  let timer;
  return function(...args) {
    if (timer) return
    timer = setTimeout(()=>{
      fn.call(this, ...args);
      timer = null
    },delay)
  }
}

Martin's Blog

防抖和节流