前端防抖节流，以及他们的应用场景（常见前端面试题）

防抖（Debounce）和节流（Throttle）是常用的性能优化技巧，它们可以限制函数的执行频率，提升用户体验和减少不必要的计算开销。

防抖（Debounce）的原理是在一段时间内，只有最后一次触发事件后的等待时间过去后，才会执行对应的函数。如果在等待时间内又触发了该事件，那么会重新计时等待。防抖适用于需要等待用户停止操作后再执行的场景，例如输入框输入完成后进行搜索。

节流（Throttle）的原理是在一段时间内只执行一次函数。无论触发事件的频率有多高，都会按照固定的时间间隔执行函数。节流适用于需要控制函数执行频率的场景，例如滚动事件时的懒加载。

应用场景：

• 防抖：输入框搜索、窗口大小调整、按钮点击防止重复提交等需要等待用户停止操作后再执行的场景。
• 节流：滚动事件处理、鼠标移动事件、页面滚动加载、限制请求频率等需要控制函数执行频率的场景。

实现防抖和节流的方法有很多，可以使用原生 JavaScript 或者借助第三方库实现。在原生 JavaScript 中，可以通过使用定时器和函数执行时间戳来实现防抖和节流。常见的防抖和节流函数实现有：

• 防抖函数的实现：

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

  节流函数的实现：

  • function throttle(func, delay) {
      let timer;
      return function(...args) {
        if (!timer) {
          timer = setTimeout(() => {
            func.apply(this, args);
            timer = null;
          }, delay);
        }
      };
    }
    

    以上是简单的防抖和节流函数示例，具体使用时可以根据实际需求进行参数调整和逻辑处理。