JS 手写： 防抖 (debounce)

2023-05-17 15:17:31 浏览数 (2)

# 思路

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

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

# 场景

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

# 实现

代码语言：javascript复制
/**
 * @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);
  };
}
表单 表单验证 函数 事件 原理

1 人点赞