防抖和节流

防抖和节流是前端开发中常用的两种优化性能的技术。

防抖（Debounce）

防抖是指将多次执行变成最后一次执行，即在指定时间内只执行一次。比如，当用户频繁操作某个按钮时，我们可以通过防抖来减少对服务器的请求次数，提高页面响应速度。在防抖技术中，我们需要设置一个时间阈值，当触发事件后，在这个时间阈值内再次触发同一事件，就会清除当前已经存在的定时器，并重新开始计时，直到达到设定的时间阈值后才会执行该事件。

举个例子，当用户输入搜索关键字时，我们可以使用防抖函数，以避免在用户输入过程中频繁向后台发送请求。代码示例：

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

// 搜索框输入事件处理函数
const handleSearch = debounce(function(keyword) {
  console.log('搜索关键字：', keyword);
}, 500);

节流（Throttle）

节流是指按照固定的时间间隔执行事件，即将多次执行变成每隔一段时间执行一次。比如，在滚动页面时，我们可以通过节流来减少滚动事件的触发次数，以提高页面性能。在节流技术中，我们需要设置一个时间间隔，即在事件被触发的情况下，如果这个时间间隔已经达到了设定的时间间隔，那么就执行该事件并重置时间间隔；否则，不执行该事件。

举个例子，当用户不断地滚动页面时，我们可以使用节流函数，以减少频繁重绘页面的次数。代码示例：

function throttle(fn, interval) {
  let lastTime = 0;
  return function() {
    const nowTime = new Date().getTime();
    if (nowTime - lastTime > interval) {
      fn.apply(this, arguments);
      lastTime = nowTime;
    }
  }
}

// 滚动事件处理函数
const handleScroll = throttle(function() {
  console.log('滚动事件触发');
}, 500);

总结：防抖与节流都是为了解决高频率触发事件而引起的性能问题，它们的本质是控制事件触发频率，从而减少性能问题的出现。防抖和节流的区别在于：防抖是将多次执行变成最后一次执行，而节流是按照固定的时间间隔执行事件。