JS 防抖和节流|极客笔记

JS 防抖和节流

在开发网页应用的过程中，经常会遇到一些需要限制函数执行频率的场景，比如监听滚动事件时需要控制函数的执行频率，以避免过多的性能消耗。防抖和节流就是两种常见的解决方案。本文将详细介绍防抖和节流的概念、实现方法和使用场景，并给出相应的代码示例。

防抖（Debounce）

所谓防抖，即是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计时。在实际开发中，防抖常用于处理输入框输入事件，滚动事件等可能会频繁触发的事件，以减少不必要的操作。

实现原理

防抖的实现原理比较简单，主要是利用定时器和闭包的方式。在每次触发事件时都会先清除之前的定时器，然后重新设置定时器来延迟执行函数。这样就可以实现在一定时间内只执行一次函数。

代码示例

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

function debounce(func, delay) {
  let timer;

  return function() {
    const args = arguments;

    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

使用场景

1. 输入框输入事件

在处理输入框输入事件时，通常会进行实时搜索或者实时校验等操作。如果不使用防抖，每次输入都会触发对应的操作，这样会导致频繁的请求或校验，从而影响性能。使用防抖可以限制在用户输入完毕后才执行对应的操作，提高用户体验。

const input = document.getElementById('search-input');
input.addEventListener('input', debounce(function() {
  // 处理实时搜索操作
}, 500));

2. 按钮点击事件

在处理按钮点击事件时，有时候需要限制用户频繁点击按钮造成多次操作。比如提交表单时需要阻止用户重复提交等操作。

const button = document.getElementById('submit-button');
button.addEventListener('click', debounce(function() {
  // 处理按钮点击操作
}, 1000));

节流（Throttle）

节流是一种更加连续的限制函数执行频率的方法，即在一段时间内只能触发一次函数。节流和防抖的区别在于，节流会确保在每个时间段内至少执行一次函数，而防抖会等待触发事件的 n 秒后再执行函数。

实现原理

节流的实现原理也比较简单，主要是利用时间戳和定时器结合的方式。在触发事件时，通过判断当前时间戳和上一次执行函数的时间戳的差值来决定是否执行函数。

代码示例

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

function throttle(func, interval) {
  let lastTime = 0;

  return function() {
    const now = Date.now();
    if (now - lastTime >= interval) {
      lastTime = now;
      func.apply(this, arguments);
    }
  };
}

使用场景

1. 滚动事件

在处理滚动事件时，通常会有一些需要随着滚动实时更新的内容。如果不使用节流，滚动时会频繁触发事件，对性能有一定的影响。使用节流可以控制在一段时间内只更新一次内容，提高性能。

window.addEventListener('scroll', throttle(function() {
  // 处理滚动事件操作
}, 200));

2. 鼠标移动事件

处理鼠标移动事件时也经常需要使用节流来控制函数执行频率，以减少对性能的影响。

document.addEventListener('mousemove', throttle(function() {
  // 处理鼠标移动事件操作
}, 100));

防抖和节流的选择

在实际开发中，对于不同的场景需要选择合适的方法来限制函数的执行频率。一般来说，如果是需要频繁触发的事件且希望在事件结束后立即执行函数，就使用防抖；如果是需要连续触发的事件且希望在一个时间段内至少执行一次函数，就使用节流。

需要注意的是，防抖和节流都是为了优化性能而设计的，但过度使用也会带来一定的问题，比如在用户交互上造成延迟等不良体验。因此在实际应用中，需要根据具体情况来选择是否使用防抖和节流。

总的来说，防抖和节流是前端开发中常用的函数限流方法，能够有效减少不必要的函数执行，提高页面性能和用户体验。

JS 防抖和节流