JavaScript 自己实现 防抖 (debounce)

思路

防抖函数原理：在事件被触发 n 秒后再执行回调，如果在这 n 秒内又被触发，则重新计时

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

场景

• 按钮提交

  • 分支多次提交，只执行最后一次提交

• 表单验证

  • 需要服务端验证表单的情况，只执行一段连续输入事件的最后一次
  • 搜索联想词

实现

/**
 * @param {Function} fn
 * @param {Number} delay
 */
function debounce (fn, delay = 50) {
  let timer = 0;
  return function (...args) {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}