防抖

在 Web 开发中，防抖是一种延迟执行的技术。它可以确保在一连串连续触发的事件中，只有最后一个事件完成后才会执行相应的处理函数。这对于处理用户输入、滚动事件等频繁触发的场景非常有用。

定义一个计时器变量，用于记录上一次触发事件后的等待时间。
当事件触发时，如果计时器存在，则清除计时器，重新开始计时。
设置一个新的计时器，等待一定时间后执行相应的处理函数。

// 定义防抖函数
function debounce(func, delay) {
  let timer;
  
  return function() {
    clearTimeout(timer);
    
    timer = setTimeout(() => {
      func.apply(this, arguments);
    }, delay);
  };
}

// 处理搜索的函数
function search(keyword) {
  // 执行搜索逻辑
  console.log('正在搜索关键词:', keyword);
}

// 获取输入框元素
const input = document.getElementById('search-input');

// 应用防抖优化搜索
const debouncedSearch = debounce(search, 300);

// 监听输入事件，并应用防抖函数
input.addEventListener('input', function(event) {
  const keyword = event.target.value;
  debouncedSearch(keyword);
});

首先定义了一个 debounce 函数，它接受一个处理函数 func 和延迟时间 delay。然后，在每次触发事件时，我们先清除之前的计时器，然后设置一个新的计时器来执行相应的处理函数。

接下来，我们定义了一个处理搜索功能的函数 search，用于演示实际的处理逻辑。

然后，我们获取了一个输入框元素，并将防抖函数应用于输入事件的监听器中。每当用户输入内容时，防抖函数都会确保在用户停止输入一段时间后才执行搜索函数，从而减少不必要的搜索请求。

节流

节流是另一种可以优化频繁触发事件的技术，它确保在一段时间内只能触发一次处理函数。与防抖不同，节流技术通过限制执行频率来控制事件的触发次数。

定义一个标志位变量，用于记录是否已经有处理函数在执行。
当事件触发时，如果标志位为真，则说明上一个处理函数还在执行，直接返回，不执行新的处理函数。
设置标志位为真，执行相应的处理函数。
在一定的时间间隔后，将标志位重新设置为假，以允许下次事件触发。

// 定义节流函数
function throttle(func, delay) {
  let isThrottled = false;
  
  return function() {
    if (isThrottled) {
      return;
    }
    
    isThrottled = true;
    func.apply(this, arguments);
    
    setTimeout(() => {
      isThrottled = false;
    }, delay);
  };
}

// 处理按钮点击事件的函数
function handleClick() {
  // 执行点击事件逻辑
  console.log('按钮被点击了');
}

// 获取按钮元素
const button = document.getElementById('click-button');

// 应用节流优化按钮点击
const throttledClick = throttle(handleClick, 1000);

// 监听按钮点击事件，并应用节流函数
button.addEventListener('click', throttledClick);

首先定义了一个 throttle 函数，它接受一个处理函数 func 和时间间隔 delay。然后，在每次触发事件时，我们检查标志位变量 isThrottled 的状态。如果标志位为真，说明上一个处理函数还在执行，直接返回，不执行新的处理函数。否则，我们设置标志位为真并执行相应的处理函数。

接下来，我们定义了一个处理按钮点击事件的函数 handleClick，用于演示实际的处理逻辑。

然后，我们获取了一个按钮元素，并将节流函数应用于点击事件的监听器中。每当用户点击按钮时，节流函数都会确保在一定时间间隔内只触发一次点击处理函数，从而限制按钮点击的频率。

防抖和节流 | 青训营笔记

防抖

节流