JS防抖和节流区别及实现方式|极客笔记

JS防抖和节流区别及实现方式

在网页开发中，防抖（Debounce）和节流（Throttle）是两种常用的性能优化技巧，用于减少不必要的函数重复执行，提升页面性能和用户体验。本文将详细介绍防抖和节流的区别以及它们的实现方式。

防抖（Debounce）

定义

防抖的概念是指在一定时间间隔内，只执行最后一次操作，即当触发事件后，等待一定时间，并且在这段时间之内没有再次触发事件才执行函数。防抖常用于输入框输入内容验证、滚动事件等频繁触发的操作。

实现方式

下面以JavaScript代码为例，展示防抖的简单实现方式：

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

// 使用示例
const debounceFunc = debounce(() => {
  console.log("防抖操作执行");
}, 300);

window.addEventListener("scroll", debounceFunc);

应用场景

输入框搜索建议，用户输入停止后再发送请求
窗口大小改变事件，等用户停止调整窗口大小后再触发适配操作

节流（Throttle）

定义

节流的概念是指在一定时间间隔内，只执行一次操作，即当触发事件后，等待一定时间后执行函数，再次触发事件时，如果时间未到，则忽略该事件。节流常用于滚动事件、鼠标移动等高频触发的操作。

实现方式

下面以JavaScript代码为例，展示节流的简单实现方式：

function throttle(func, interval) {
  let previous = 0;
  return function() {
    const now = Date.now();
    const context = this;
    const args = arguments;
    if (now - previous >= interval) {
      func.apply(context, args);
      previous = now;
    }
  };
}

// 使用示例
const throttleFunc = throttle(() => {
  console.log("节流操作执行");
}, 300);

window.addEventListener("scroll", throttleFunc);