JS节流和防抖|极客笔记

JS节流和防抖

在前端开发中，为了提高性能和用户体验，我们经常会遇到需要控制某个函数的执行频率的情况。这时候就需要用到节流（throttle）和防抖（debounce）这两个技术。本文将详细介绍节流和防抖的概念、原理和实际应用。

什么是节流和防抖？

节流和防抖是两种常用的优化方法，它们都是为了解决高频率触发事件导致性能问题的情况。

节流：是指在一定时间间隔内只执行一次某个函数。即使在这段时间内该函数被多次触发，也只会执行一次。节流主要用来限制函数的执行频率。
防抖：是指在一定时间间隔内只有最后一次触发事件后才执行某个函数。如果在这段时间内事件又被触发，那么之前的定时器会被清除，重新触发计时。防抖主要用来限制函数的执行次数。

节流的原理和实现

节流的原理比较简单，就是通过设置一个定时器，在每次触发事件时判断当前时间是否已经超过了设定的时间间隔，如果是，则执行函数并更新执行时间，如果不是，则忽略当前事件。

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

function throttle(fn, interval) {
  let timer = null;
  let last = 0;

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

    if (now - last >= interval) {
      fn.apply(context, args);
      last = now;
    }
  };
}

我们可以使用这个throttle函数来限制某个函数的执行频率。例如，我们可以将页面的scroll事件节流处理：

window.addEventListener('scroll', throttle(function() {
  console.log('Scroll event triggered');
}, 1000));

运行示例代码后，可以看到控制台每隔1秒输出一次Scroll event triggered。

防抖的原理和实现

防抖的原理也很简单，就是在每次触发事件时都会清除当前的定时器，重新设置一个新的定时器。只有在事件停止触发一定时间后才会执行函数。

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

function debounce(fn, delay) {
  let timer = null;

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

    if (timer) {
      clearTimeout(timer);
    }

    timer = setTimeout(() => {
      fn.apply(context, args);
    }, delay);
  };
}

我们可以使用这个debounce函数来限制某个函数的执行次数。例如，我们可以将输入框的keyup事件防抖处理：

const input = document.getElementById('input');

input.addEventListener('keyup', debounce(function() {
  console.log(input.value);
}, 500));

运行示例代码后，可以看到在连续输入时只有在停止输入500毫秒后才会输出输入框的值。

节流和防抖的应用场景

节流的应用：适用于需要稳定的执行频率的场景，比如页面的滚动事件、resize事件等。
防抖的应用：适用于只关注最后一次事件的场景，比如输入框的输入事件、提交按钮的点击事件等。

综上所述，节流和防抖是两种常用的优化方法，可以有效地控制函数的执行频率，提高页面性能和用户体验。在实际开发中，根据具体的场景选择合适的方法来优化代码是非常重要的。

JS节流和防抖