JavaScript 中实现防抖（Debounce）和节流（Throttle）

最新推荐文章于 2025-04-08 14:38:28 发布

前端程序员_花姐夫Jun

最新推荐文章于 2025-04-08 14:38:28 发布

阅读量1k

点赞数 6

分类专栏：前端基础必备知识点（面试笔试必会）文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/u012917880/article/details/145304229

版权

前端基础必备知识点（面试笔试必会）专栏收录该内容

2 篇文章

订阅专栏

前言

以下是在 JavaScript 中实现防抖（Debounce）和节流（Throttle）的详细解释和代码示例，包括它们的实现思路、使用场景和优化点：

一、防抖（Debounce）

实现思路：

当事件触发时，设置一个定时器，在延迟时间内如果再次触发事件，清除之前的定时器并重新设置定时器。
只有在延迟时间内没有再次触发事件，定时器到期时才执行目标函数。

function debounce(func, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

// 示例使用
function handleClick() {
  console.log('Button clicked');
}

const debouncedClick = debounce(handleClick, 300);

document.getElementById('myButton').addEventListener('click', debouncedClick);

代码解释：

function debounce(func, delay) {...}：
let timer;：存储定时器的引用。
return function(...args) {...}：返回一个新的函数，每次调用时清除之前的定时器并设置新的定时器。
clearTimeout(timer);：清除之前的定时器，防止之前的操作执行。
timer = setTimeout(() => {...}, delay);：设置一个新的定时器，在 delay 毫秒后执行 func 函数。
function handleClick() {...}：定义一个事件处理函数。
const debouncedClick = debounce(handleClick, 300);：创建一个防抖处理后的函数，延迟时间为 300 毫秒。
document.getElementById('myButton').addEventListener('click', debouncedClick);：将防抖处理后的函数添加到事件监听器中。

优化点：

可以添加 immediate 参数，决定是否在首次触发时立即执行函数。

function debounce(func, delay, immediate = false) {
  let timer;
  return function(...args) {
    const callNow = immediate &&!timer;
    clearTimeout(timer);
    timer = setTimeout(() => {
      timer = null;
      if (!immediate) {
        func.apply(this, args);
      }
    }, delay);
    if (callNow) {
      func.apply(this, args);
    }
  };
}

// 示例使用
const debouncedClick = debounce(handleClick, 300, true);
document.getElementById('myButton').addEventListener('click', debouncedClick);

解释：

immediate 参数：如果为 true，则在首次触发时立即执行函数，然后开始防抖。

二、节流（Throttle）

实现思路：

记录上次执行的时间，当事件触发时，判断距离上次执行的时间是否超过限制时间。
如果超过限制时间，执行函数并更新上次执行时间；如果未超过，不执行。

function throttle(func, limit) {
  let inThrottle;
  let lastCall = 0;
  return function(...args) {
    const now = new Date().getTime();
    if (now - lastCall < limit) {
      return;
    }
    lastCall = now;
    return func.apply(this, args);
  };
}

// 示例使用
function handleScroll() {
  console.log('Scrolled');
}

const throttledScroll = throttle(handleScroll, 200);

window.addEventListener('scroll', throttledScroll);

代码解释：

function throttle(func, limit) {...}：
let inThrottle; 和 let lastCall = 0;：存储节流状态和上次执行时间。
return function(...args) {...}：返回一个新的函数，根据当前时间和上次执行时间的差决定是否执行 func。
const now = new Date().getTime();：获取当前时间。
if (now - lastCall < limit) {...}：如果未超过限制时间，不执行函数。
lastCall = now;：更新上次执行时间。
return func.apply(this, args);：执行函数。
function handleScroll() {...}：定义一个事件处理函数。
const throttledScroll = throttle(handleScroll, 200);：创建一个节流处理后的函数，限制时间为 200 毫秒。
window.addEventListener('scroll', throttledScroll);：将节流处理后的函数添加到事件监听器中。

优化点：

可以添加 leading 和 trailing 参数，决定是否在开始和结束时执行函数。

function throttle(func, limit, leading = true, trailing = true) {
  let inThrottle, lastCall, timer;
  return function(...args) {
    const now = new Date().getTime();
    if (!inThrottle) {
      if (leading) {
        func.apply(this, args);
      }
      inThrottle = true;
      lastCall = now;
    } else if (trailing) {
      clearTimeout(timer);
      timer = setTimeout(() => {
        func.apply(this, args);
        lastCall = new Date().getTime();
        inThrottle = false;
      }, limit - (now - lastCall));
    }
  };
}

// 示例使用
const throttledScroll = throttle(handleScroll, 200, false, true);
window.addEventListener('scroll', throttledScroll);