javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > js 防抖与节流

JavaScript防抖与节流详解

作者：旺代

防抖是一种 优化高频触发事件 的技术,其核心思想是在事件被频繁触发时,只有最后一次操作会被执行,中间的触发会被忽略,本文给大家介绍JavaScript防抖与节流知识,感兴趣的朋友一起看看吧

 防抖（Debounce）

一、防抖的定义

防抖是一种 优化高频触发事件 的技术，其核心思想是：在事件被频繁触发时，只有最后一次操作会被执行，中间的触发会被忽略。

二、防抖的实现原理

防抖的底层实现依赖以下技术点：

三、防抖的代码实现

以下是一个支持 立即执行 和 延迟执行 的通用防抖函数：

function debounce(func, wait, immediate = false) {
  let timeout = null;
  // 返回包装后的防抖函数
  return function (...args) {
    const context = this;
    // 如果定时器存在，清除之前的定时器（取消未执行的延迟操作）
    if (timeout) clearTimeout(timeout);
    if (immediate) {
      // 立即执行模式：首次触发立即执行，后续在 wait 时间内触发则重新计时
      const callNow = !timeout;
      timeout = setTimeout(() => {
        timeout = null; // 恢复可执行状态
      }, wait);
      if (callNow) func.apply(context, args);
    } else {
      // 延迟执行模式：最后一次触发后等待 wait 时间再执行
      timeout = setTimeout(() => {
        func.apply(context, args);
      }, wait);
    }
  };
}

四、代码解析

五、使用示例

1. 输入框实时搜索（延迟执行模式）
<input type="text" id="searchInput" />
<script>
  const searchInput = document.getElementById('searchInput');
  // 原始搜索函数
  function search(query) {
    console.log('搜索关键词:', query);
  }
  // 防抖处理（延迟执行）
  const debouncedSearch = debounce(search, 500);
  // 绑定输入事件
  searchInput.addEventListener('input', function (e) {
    debouncedSearch(e.target.value);
  });
</script>
2. 按钮防重复点击（立即执行模式）
<button id="submitBtn">提交</button>
<script>
  const submitBtn = document.getElementById('submitBtn');
  // 原始提交函数
  function submitForm() {
    console.log('表单已提交');
  }
  // 防抖处理（立即执行）
  const debouncedSubmit = debounce(submitForm, 1000, true);
  // 绑定点击事件
  submitBtn.addEventListener('click', debouncedSubmit);
</script>

六、总结

节流（Throttle）

一、节流的定义

节流是一种 限制高频触发事件执行频率 的技术，其核心思想是：在事件被频繁触发时，固定时间间隔内只执行一次操作，忽略中间的触发。

二、节流的实现原理

节流的底层实现依赖以下技术点：

三、节流的代码实现

以下是两种常见的节流实现方式：

1. 时间戳方式（立即执行）

首次触发立即执行，之后在固定间隔内忽略后续触发。

function throttle(func, wait) {
  let previous = 0; // 上次执行时间戳
  return function (...args) {
    const now = Date.now();
    const context = this;
    if (now - previous > wait) {
      func.apply(context, args);
      previous = now; // 更新执行时间戳
    }
  };
}
2. 定时器方式（延迟执行）

首次触发后等待固定时间执行，之后在固定间隔内忽略后续触发。

function throttle(func, wait) {
  let timeout = null;
  return function (...args) {
    const context = this;
    if (!timeout) {
      timeout = setTimeout(() => {
        timeout = null; // 重置定时器
        func.apply(context, args);
      }, wait);
    }
  };
}
3. 结合时间戳和定时器（首尾均执行）

首次触发立即执行，最后一次触发在间隔结束后再执行一次。

function throttle(func, wait) {
  let previous = 0;
  let timeout = null;
  return function (...args) {
    const context = this;
    const now = Date.now();
    const remaining = wait - (now - previous);
    if (remaining <= 0) {
      // 立即执行
      if (timeout) {
        clearTimeout(timeout);
        timeout = null;
      }
      func.apply(context, args);
      previous = now;
    } else if (!timeout) {
      // 设置最后一次执行的定时器
      timeout = setTimeout(() => {
        func.apply(context, args);
        timeout = null;
        previous = Date.now();
      }, remaining);
    }
  };
}

四、代码解析

五、使用示例

1. 滚动事件节流（时间戳方式）
<div id="scrollArea" style="height: 2000px;"></div>
<script>
  const scrollArea = document.getElementById('scrollArea');
  // 原始滚动处理函数
  function handleScroll() {
    console.log('滚动位置:', window.scrollY);
  }
  // 节流处理（时间戳方式）
  const throttledScroll = throttle(handleScroll, 200);
  // 绑定滚动事件
  window.addEventListener('scroll', throttledScroll);
</script>
2. 按钮防重复点击（定时器方式）
<button id="clickBtn">点击</button>
<script>
  const clickBtn = document.getElementById('clickBtn');
  // 原始点击处理函数
  function handleClick() {
    console.log('按钮点击');
  }
  // 节流处理（定时器方式）
  const throttledClick = throttle(handleClick, 1000);
  // 绑定点击事件
  clickBtn.addEventListener('click', throttledClick);
</script>

六、总结

对比：防抖 vs 节流

1. 防抖（debounce）

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间

//防抖简单写法
function debounce(func, t) {
  let timer = null
  return function () {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => func(), t)
  }
}

2. 节流（throttle）

所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数

//节流简单写法
function throttle(func, t) {
  let timer = null
  return function () {
    if (!timer) {
      timer = setTimeout(() => {
        func()
        timer = null
      }, t)
    }
  }
}

3. 对比：

特性防抖（Debounce）节流（Throttle）
触发频率最后一次触发后等待 wait 时间执行固定时间间隔内最多执行一次
适用场景输入框搜索、窗口大小调整滚动事件、鼠标移动事件、频繁点击按钮
核心目标确保高频触发时只执行一次确保高频触发时按固定频率执行

源码解析

一、_.throttle()源码解析

1. 核心逻辑

节流函数确保在 wait 时间间隔内最多执行一次 func，支持首次（leading）和末次（trailing）执行控制。

2. 关键源码步骤
_.throttle(func, [wait=0], [options={}])
function throttle(func, wait, options) {
  let leading = true;
  let trailing = true;
  // 参数处理
  if (typeof options === 'object') {
    leading = 'leading' in options ? !!options.leading : leading;
    trailing = 'trailing' in options ? !!options.trailing : trailing;
  }
  let lastArgs, lastThis, result;
  let timeout = null;
  let previous = 0;
  const throttled = function(...args) {
    const now = Date.now();
    // 首次调用且不执行 leading 时，设置 previous 为 now
    if (!previous && leading === false) previous = now;
    // 计算剩余时间
    const remaining = wait - (now - previous);
    // 需要执行（剩余时间 <=0 或系统时间被修改）
    if (remaining <= 0 || remaining > wait) {
      if (timeout) {
        clearTimeout(timeout);
        timeout = null;
      }
      previous = now;
      result = func.apply(this, args);
    } else if (!timeout && trailing !== false) {
      // 设置尾调用的定时器
      timeout = setTimeout(() => {
        previous = leading === false ? 0 : Date.now();
        timeout = null;
        result = func.apply(lastThis, lastArgs);
      }, remaining);
    }
    return result;
  };
  // 提供取消方法
  throttled.cancel = function() {
    clearTimeout(timeout);
    previous = 0;
    timeout = lastArgs = lastThis = null;
  };
  return throttled;
}
3. 核心特性

二、_.debounce()源码解析

1. 核心逻辑

防抖函数在连续触发时，仅在最后一次触发后等待 wait 时间执行一次 func，支持立即执行模式（leading）。

2. 关键源码步骤
_.debounce(func, [wait=0], [options={}])
function debounce(func, wait, options) {
  let lastArgs, lastThis, result;
  let timerId = null;
  let lastCallTime = 0;
  let leading = false;
  let maxing = false;
  let maxWait;
  // 参数处理
  if (typeof options === 'object') {
    leading = !!options.leading;
    maxing = 'maxWait' in options;
    maxWait = maxing ? Math.max(options.maxWait || 0, wait) : maxWait;
  }
  const invokeFunc = (time) => {
    const args = lastArgs;
    const thisArg = lastThis;
    lastArgs = lastThis = undefined;
    result = func.apply(thisArg, args);
    return result;
  };
  const leadingEdge = (time) => {
    // 记录最后一次调用时间
    lastCallTime = time;
    // 设置定时器
    timerId = setTimeout(timerExpired, wait);
    // 立即执行模式
    return leading ? invokeFunc(time) : result;
  };
  const shouldInvoke = (time) => {
    // 判断是否需要执行（超过 wait 或 maxWait）
    const timeSinceLastCall = time - lastCallTime;
    return (lastCallTime === 0) || (timeSinceLastCall >= wait) || 
           (maxing && timeSinceLastCall >= maxWait);
  };
  const debounced = function(...args) {
    const time = Date.now();
    lastArgs = args;
    lastThis = this;
    // 判断是否应该执行
    const isInvoking = shouldInvoke(time);
    if (isInvoking) {
      // 清除已有定时器
      if (timerId === null) {
        return leadingEdge(time);
      }
      // 处理 maxWait 场景
      if (maxing) {
        timerId = setTimeout(timerExpired, wait);
        return invokeFunc(time);
      }
    }
    // 设置/重置定时器
    if (timerId === null) {
      timerId = setTimeout(timerExpired, wait);
    }
    return result;
  };
  // 提供取消和立即执行方法
  debounced.cancel = function() { /* ... */ };
  debounced.flush = function() { /* ... */ };
  return debounced;
}
3. 核心特性

到此这篇关于JavaScript防抖与节流的文章就介绍到这了,更多相关js 防抖与节流内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文