前端页面优化（一） 性能篇：防抖与节流

前端中的防抖（Debounce）和节流（Throttle）函数是为了解决频繁触发事件时的性能问题。

1、防抖

防抖函数的作用是在事件触发后，等待一段时间后再执行相应的处理逻辑。如果在这段时间内又发生了相同事件的触发，则重新计时。这样可以避免在连续触发事件时频繁执行处理逻辑，起到节流的效果。

一个常见的防抖函数实现如下：

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

其中，func表示需要执行的处理逻辑，delay表示延迟时间。

2、节流

节流函数的作用是在一定时间段内，最多执行一次相应的处理逻辑。如果在这个时间段内频繁触发事件，只有第一次会执行处理逻辑，后续的触发会被忽略。

一个常见的节流函数实现如下：

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

其中，func表示需要执行的处理逻辑，interval表示时间间隔。

使用防抖和节流函数可以有效控制函数的执行频率，提升网页性能和用户体验。例如在监听滚动事件时，可以利用节流函数限制事件触发的频率，避免过多的计算和更新操作；在输入框搜索功能中，可以利用防抖函数减少请求次数，减轻服务器压力。