JS 手写：防抖 (debounce)

Cellinlab

发布于 2023-05-17 15:17:31

4550

发布于 2023-05-17 15:17:31

文章被收录于专栏：Cellinlab's BlogCellinlab's Blog

# 思路

防抖函数原理：在事件被触发 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);
  };
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021/1/6，如有侵权请联系 cloudcommunity@tencent.com 删除

表单