JS实现防抖（Debounce）和节流（Throttle）

最新推荐文章于 2024-06-27 13:36:25 发布

CrazBarry

最新推荐文章于 2024-06-27 13:36:25 发布

阅读量547

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/CrazBarry/article/details/133685074

版权

本文介绍了防抖(Debounce)和节流(Throttle)两种技术，它们用于限制函数调用频率，分别适用于防止频繁触发和保证在一段时间内仅执行一次。通过示例展示了如何在JavaScript中实现这两种优化方法。

摘要由CSDN通过智能技术生成

防抖（Debounce）和节流（Throttle）是用于限制函数调用频率的两种常用技术，可以帮助你控制事件处理函数的执行次数。下面分别是防抖和节流函数的实现示例。

防抖函数（Debounce）

防抖函数意味着当事件被触发后，要等待一段时间（等待时间间隔）后才执行函数。如果在等待时间内再次触发事件，将重新计时。如实时监听输入事件，防止用户多次点击按钮可用到

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

// 用法示例：
const debouncedFunction = debounce(function() {
  console.log("Debounced function called");
}, 1000);

// 调用 debouncedFunction 会在 1 秒后执行，如果在 1 秒内再次调用，则重新计时
debouncedFunction();

节流函数（Throttle）

节流函数意味着在一段时间内最多只能执行一次函数，无论事件触发频率多高。如滚动事件，表单提交按钮

function throttle(func, delay) {
  let canRun = true;
  
  return function (...args) {
    if (!canRun) return;
    
    canRun = false;
    setTimeout(() => {
      func.apply(this, args);
      canRun = true;
    }, delay);
  };
}

// 用法示例：
const throttledFunction = throttle(function() {
  console.log("Throttled function called");
}, 1000);

// 调用 throttledFunction，每隔 1 秒执行一次，多次调用在等待期间不会执行
throttledFunction();