防抖和节流：卓越代码的秘诀

2023-09-09 09:01:09

引言

在现代网络应用开发中，用户体验和代码可读性是不可或缺的要素。函数防抖和节流作为两种优化技巧，可以有效提高代码执行效率，防止不必要的函数调用，从而提升用户体验和代码可读性。

函数防抖

函数防抖（debounce）是一种技术，用于在一定时间内只执行一次函数。当一个函数被连续触发时，防抖技术会延迟函数的执行，直到触发停止一段时间后才执行。这可以防止函数在短时间内被多次调用，从而提高代码的性能和用户体验。

函数节流

函数节流（throttle）与防抖类似，但它是在一定时间内只允许函数执行一次。当一个函数被连续触发时，节流技术会限制函数的执行频率，使之在指定时间间隔内只执行一次。这可以防止函数在短时间内被多次调用，从而降低对服务器的请求频率，提高代码的性能和用户体验。

应用场景

输入框搜索 ：当用户在输入框中输入时，防抖技术可以防止在每次输入后立即发送请求，从而减少不必要的请求。
滚动事件监听 ：当用户滚动页面时，节流技术可以防止在每次滚动后立即执行事件处理函数，从而降低对浏览器的压力，提高代码的性能。
按钮点击事件监听 ：当用户连续点击按钮时，节流技术可以防止在每次点击后立即执行事件处理函数，从而防止按钮被多次触发。

实施方法

函数防抖和节流技术可以在JavaScript中通过以下方式实现：

防抖：

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

节流：

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