防抖和节流

一、防抖

1、概念：防抖是指在一段时间内多次触发同一事件时，只执行最后一次触发的操作。也就是说，如果在设定的时间内再次触发事件，计时会被重置。

2、应用场景：适用于需要等待用户停止操作后再执行的场景，比如搜索框输入时，延迟一段时间后触发搜索请求，避免频繁发送请求。

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

// 模拟发送搜索请求的函数
function searchRequest() {
  console.log('Sending search request...');
  // 模拟发送搜索请求的操作
}

// 使用防抖函数包装发送搜索请求的函数
const debouncedSearchRequest = debounce(searchRequest, 500); // 设置延迟时间为500ms

// 监听搜索框输入事件，当输入发生时调用防抖函数
document.getElementById('searchInput').addEventListener('input', debouncedSearchRequest);

二、节流

1、概念：节流是指在一段时间内只允许事件触发一次。无论事件触发频率多高，都会按照设定的时间间隔执行事件处理函数。

2、应用场景：适用于需要控制事件处理频率的场景，比如页面滚动时，每隔一定时间触发一次滚动事件处理函数，避免过于频繁的事件触发。

// 节流函数
function throttle(func, delay) {
  let throttled = false;
  
  return function() {
    if (!throttled) {
      const context = this;
      const args = arguments;
      
      throttled = true;
      func.apply(context, args);
      
      setTimeout(() => {
        throttled = false;
      }, delay);
    }
  };
}

// 模拟处理页面滚动事件的函数
function handleScroll() {
  console.log('Handling scroll event...');
  // 模拟处理页面滚动事件的操作
}

// 使用节流函数包装处理页面滚动事件的函数
const throttledHandleScroll = throttle(handleScroll, 300); // 设置间隔时间为300ms

// 监听页面滚动事件，当滚动发生时调用节流函数
window.addEventListener('scroll', throttledHandleScroll);

三、两者之间的区别

1、触发时机不同：防抖是在事件触发后等待一段时间再执行，而节流是每隔一段时间执行一次事件处理。

2、执行次数不同：防抖只会执行最后一次触发的事件，而节流会按照设定的时间间隔执行事件处理，可能会执行多次。

3、适用场景不同：防抖适用于需要等待用户停止操作后再执行的场景，而节流适用于需要控制事件处理频率的场景。