JS 防抖和节流的区别|极客笔记

JS 防抖和节流的区别

在前端开发中，我们经常会遇到需要控制事件触发频率的情况，而防抖和节流就是解决这类问题的两种常用策略。本文将详细介绍防抖和节流的概念、原理及区别，并给出相关的代码示例和运行结果。

防抖（Debounce）的原理和实现

防抖的作用是在触发事件后，若在一定时间内再次触发该事件，则将原事件取消，直到一定时间内没有再次触发事件，才执行该事件。

防抖的实现原理是利用 setTimeout 来延迟执行事件，每次事件触发时都会清除之前的定时器，并重新设置新的定时器。

下面是一个简单的防抖函数的实现：

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('Debounced function executed');
}, 1000);

// 模拟事件触发
debounceFunc(); // 不会立即执行
setTimeout(() => {
  debounceFunc(); // 会在1秒后执行
}, 500);

上面代码中的 debounce 函数接受两个参数：func 表示要执行的函数，delay 表示延迟时间。在事件触发时，会设置一个定时器，在延迟时间后执行函数。

节流（Throttle）的原理和实现

节流的作用是在一段时间内只执行一次事件，即控制事件触发频率，保证在规定时间段内只执行一次事件。

节流的实现原理是通过设置一个定时器，在规定时间内只触发一次事件，通过判断事件与上次触发的时间间隔是否大于规定时间来决定是否执行事件。

下面是一个简单的节流函数的实现：

function throttle(func, delay) {
  let timer = null;

  return function() {
    const context = this;
    const args = arguments;

    if (!timer) {
      timer = setTimeout(() => {
        func.apply(context, args);
        timer = null;
      }, delay);
    }
  };
}

// 测试节流函数
const throttleFunc = throttle(() => {
  console.log('Throttled function executed');
}, 1000);

// 模拟事件触发
throttleFunc(); // 会立即执行
setTimeout(() => {
  throttleFunc(); // 不会执行
}, 500);

上面代码中的 throttle 函数同样接受两个参数：func 表示要执行的函数，delay 表示间隔时间。在事件触发时，通过判断定时器是否存在来决定是否执行函数。