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

JS 节流和防抖的区别

在前端开发中，经常会遇到需要处理大量事件监听的情况，而节流（throttle）和防抖（debounce）是两种常见的优化手段。它们可以帮助我们控制事件被频繁触发时的执行次数，提高页面的性能表现。在本文中，我们将详细介绍节流和防抖的概念、原理和实现方式，并对它们之间的区别进行对比分析。

节流（Throttle）的概念

节流是一种频率控制的技术，它可以确保函数在一定时间内只执行一次。即如果在规定的时间间隔内重复触发事件，只有一次响应，而忽略后续触发。节流通常用于提高性能和防止函数被频繁调用。

节流的原理

节流的原理其实非常简单，就是设置一个定时器，当事件被触发时，先判断定时器是否存在，如果存在则不执行相应的处理函数，否则执行处理函数并设置定时器，在规定时间后清除定时器。

节流的实现

下面我们来看一个简单的节流实现示例：

function throttle(fn, delay) {
  let timer = null;
  return function() {
    if (!timer) {
      timer = setTimeout(() => {
        fn.apply(this, arguments);
        timer = null;
      }, delay);
    }
  }
}

// 示例代码
function handleResize() {
  console.log('Resize event throttled');
}

window.addEventListener('resize', throttle(handleResize, 1000));

节流的应用场景

Input实时搜索功能
滚动加载数据
防止按钮多次点击

防抖（Debounce）的概念

防抖是一种延迟执行的技术，它可以确保函数在规定时间内不被重复执行。即如果在规定时间内再次触发事件，会清除之前设置的定时器，并重新设置一个新的定时器来延迟执行。防抖通常用于优化用户输入、减少不必要的请求或操作。

防抖的原理

防抖的原理也很简单，当事件被触发时，先清除之前设置的定时器，再设置一个新的定时器，等待规定时间后再触发相应的处理函数。

防抖的实现

下面我们来看一个简单的防抖实现示例：

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

// 示例代码
function handleInput() {
  console.log('Input event debounced');
}

document.getElementById('input').addEventListener('input', debounce(handleInput, 500));