前端的防抖和节流

在前端开发中，防抖（Debounce）和节流（Throttle）是很常用的两个性能优化技术，在处理用户频繁触发的事件（如输入框输入、窗口滚动、鼠标移动等）时，能够有效降低频繁调用带来的性能问题。

一、什么是防抖（Debounce）

防抖的核心思想是：在触发事件后一定时间内，如果事件被重新触发，则重新计时，只有在指定的时间段内不再触发事件时，事件处理函数才会被执行。

1、原理

防抖的原理是：通过延时器（setTimeout）来延迟函数的执行，如果在延时器执行前事件被再次触发，则清除之前的延时器并重新计时。

2 、使用场景

• 搜索框输入联想：用户输入完成后再发送请求，而不是每输入一个字符就发送。
• 窗口大小调整：用户停止调整窗口大小后才触发事件，避免频繁触发导致的性能问题。
• 表单验证：表单值变更后延迟验证，避免每次输入都触发验证。
• ......

3、 实现代码

以下是一个简单的防抖实现：

//防抖
function debounce(func, delay) {
  let timer = null; // 保存定时器

  return function (...args) {
    // 清除前一个定时器
    if (timer) clearTimeout(timer);

    // 设置新的定时器
    timer = setTimeout(() => {
      func.apply(this, args); // 确保 this 指向正确
    }, delay);
  };
}

// 测试防抖事件
function test(){
  console.log("--------测试防抖--------");
}

// 创建防抖函数实例
const debounceTest = debounce(test,1000);

const inputElement = document.getElementById("searchInput");

inputElement.addEventListener("input", (e) => {
  // 调用防抖函数
  debounceTest();
});

实现效果：当用户停止输入 1000 毫秒后，才会触发测试操作。

二、什么是节流（Throttle）

节流的核心思想是：限制一个函数在一定时间内只能被调用一次，即事件触发后，只有在指定时间间隔结束后才会执行下次事件处理。

1、原理

节流的原理是：通过时间间隔控制函数的执行，分为两种实现方式：

• 时间戳模式：立即执行，之后在指定时间间隔内不再执行。
• 定时器模式：在指定时间间隔后执行。

2、使用场景

• 滚动事件：监控页面滚动时，避免每一像素滚动都触发事件，降低性能开销。
• 按钮点击：避免用户连续点击按钮，导致重复触发事件。
• 页面加载：限制请求的频率，例如滚动加载时每隔一定时间发送请求。
• ......

3、实现代码

时间戳版节流

//节流
function throttle(func, delay) {
  let lastTime = 0; // 上次执行的时间

  return function (...args) {
    const now = Date.now(); // 当前时间

    if (now - lastTime > delay) {
      func.apply(this, args);
      lastTime = now; // 更新上次执行时间
    }
  };
}

定时器版节流

function throttle(func, delay) {
  let timer = null; // 保存定时器

  return function (...args) {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, args);
        timer = null; // 清空定时器
      }, delay);
    }
  };
}

//滚动节流事件
function scroll(){
  console.log("------节流测试中------");
}
// 创建节流函数实例
const handleScroll = throttle(scroll, 1000);

window.addEventListener("scroll", handleScroll);

实现效果：滚动事件最多每隔 1000毫秒触发一次。