防抖与节流：优化高频代码执行的利器

JS 防抖与节流

在前端开发中，当我们处理高频率执行的代码时，比如浏览器上的 resize、scroll、keypress、mousemove 等事件时，通常会遇到这样的问题：这些事件被频繁触发，导致绑定在事件上的回调函数不断被调用，极大地浪费资源，降低了性能。为了解决这个问题，前端开发中引入了防抖和节流两种优化手段。

一、防抖（Debounce）

防抖的原理是：在指定的时间间隔内，如果某个函数被多次触发，那么只执行一次，即最后一次触发。

实现原理：

function debounce(fn, delay) {
  let timer = null;
  return function(...args) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

特点：

• 只执行最后一次触发。
• 适用于：需要在用户停止操作后才执行的场景，如搜索框输入时查询。

二、节流（Throttle）

节流的原理是：在指定的时间间隔内，某个函数只执行一次，而不管这个函数被触发了多少次。

实现原理：

function throttle(fn, delay) {
  let lastTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastTime >= delay) {
      fn.apply(this, args);
      lastTime = now;
    }
  };
}

特点：

• 指定时间间隔内只执行一次。
• 适用于：需要限制触发频率的场景，如页面滚动时调整布局。

三、选择防抖还是节流

选择防抖还是节流需要根据具体场景决定：

• 防抖： 适用于需要在用户停止操作后才执行的场景，如搜索框输入时查询，提交表单等。
• 节流： 适用于需要限制触发频率的场景，如页面滚动时调整布局，拖拽元素时更新位置等。

四、代码示例

// 防抖示例：搜索框输入时查询
const input = document.getElementById('search-input');
const debouncedSearch = debounce(function(value) {
  // 搜索请求
}, 500);
input.addEventListener('input', function(e) {
  debouncedSearch(e.target.value);
});

// 节流示例：页面滚动时调整布局
window.addEventListener('scroll', throttle(function() {
  // 调整布局
}, 200));

结语

防抖和节流是优化高频率执行代码的有效手段，可以大大提高前端应用的性能。掌握这些技术，可以为用户提供更流畅、更响应的交互体验。