2021-09-01 [JS] - 节流和防抖

说几个场景。

• 提交按钮1秒内连续多次点击 => 我只想触发一次提交函数 【防抖】
• 实时搜索的时候，我还在打拼音的时候不想立马触发搜索函数，会卡死 => 我想输入完一个词再触发 , 或者解读当我在不停的输入的时候，每隔500ms搜索一下。 【节流】
• 但我滑动过一个页面长度的时候，网页右下角出现一个“回到顶部”的按钮=> scroll太频繁，我不想触发太频繁，可以设置直到滑动结束才判定 【防抖】，也可以滑动时每隔500ms断定一次 【节流】

总结

防抖：是将多次执行变为最后一次执行
节流：是将多次执行变为每隔一段时间执行

JS代码

/**
 * 防抖 是将多次执行变为最后一次执行
 * @param {*} fn 要执行的函数
 * @param {*} delay 响应的毫秒
 * @returns 
 */
function debounce (fn, delay = 1000) = {
  let timer = null 
  return function() {
      if(timer){clearTimeout(timer) }
      timer = setTimeout(fn,delay) // 简化写法
  }
}

/**
 * 节流 是将多次执行变为每隔一段时间执行
 * @param {*} fn 要执行的函数
 * @param {*} delay  响应的毫秒
 * @returns 
 */
 function throttle(fn, delay = 1000) = {
  let timer = null;
  return function() {
      if(timer) {
          return;
      }
      timer = setTimeout(() => {
          fn.apply(this, arguments);
          timer = null;
      }, delay)
  }
}