什么是防抖和节流？有什么区别？如何实现？

防抖和节流是前端开发中常用的优化技术，主要用于优化一些高频触发的事件，如滚动、窗口大小调整等。防抖指的是在一定时间内如果再次触发该事件，那么将重新计时，直到该时间内没有再次触发，才会执行事件；而节流则是在一定时间内只能触发一次事件。在实现方面可以使用定时器或时间戳等技术来实现。其中，防抖适用于像搜索框这样需要输入完整关键字才会产生最终结果的场景；而节流则更适合于需要频繁触发但每次执行事件耗时较久的场景。

相关问题

如何实现防抖和节流？

防抖和节流是常用的前端性能优化技术，用于控制事件触发的频率，提升用户体验。下面是它们的实现方式：

1. 防抖（Debounce）：
防抖的原理是在事件触发后等待一段时间，如果在这段时间内再次触发了该事件，则重新计时。只有在事件触发后一段时间内没有再次触发，才会执行相应的操作。

实现防抖的方法有多种，其中一种常见的方式是使用定时器：
- 设置一个定时器，在事件触发后等待一段时间（如300ms）。
- 如果在等待时间内再次触发了该事件，则清除之前的定时器并重新设置一个新的定时器。
- 如果等待时间内没有再次触发事件，则执行相应的操作。

2. 节流（Throttle）：
节流的原理是在一定时间间隔内只执行一次操作。无论事件触发频率多高，都会按照固定的时间间隔执行相应的操作。

实现节流的方法也有多种，其中一种常见的方式是使用时间戳：
- 设置一个变量记录上次执行操作的时间戳。
- 在事件触发时，判断当前时间与上次执行操作的时间间隔是否大于等待时间（如300ms）。
- 如果大于等待时间，则执行相应的操作，并更新上次执行操作的时间戳。
- 如果小于等待时间，则忽略该次事件触发。

如何实现防抖和节流？具体代码怎么实现？

防抖和节流都是为了解决频繁触发事件时的性能问题。

防抖（Debounce）：在某个时间段内，只执行一次事件。比如当用户不断输入搜索框时，不会立即执行搜索操作，而是等用户停止输入一段时间后再执行搜索操作，避免频繁发送请求。

节流（Throttle）：在某个时间段内，多次事件只执行一次。比如当用户不断滚动页面时，不会每滚动一次就触发事件，而是等待一段时间后再执行，避免频繁触发事件。

具体代码实现如下：

防抖：

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

// 使用方式
const searchFn = debounce(function() {
  // 搜索操作
}, 500);
input.addEventListener('input', searchFn);

节流：

function throttle(fn, delay) {
  let timer = null;
  let lastTime = 0;
  return function() {
    const context = this;
    const args = arguments;
    const now = +new Date();
    if (now - lastTime > delay) {
      clearTimeout(timer);
      lastTime = now;
      fn.apply(context, args);
    } else {
      clearTimeout(timer);
      timer = setTimeout(function() {
        lastTime = now;
        fn.apply(context, args);
      }, delay - (now - lastTime));
    }
  }
}

// 使用方式
const scrollFn = throttle(function() {
  // 滚动事件
}, 500);
window.addEventListener('scroll', scrollFn);

以上是基于函数的方式实现防抖和节流，也可以使用 Lodash 等第三方库来实现。