高级前端必知：防抖和节流函数及其应用场景

防抖和节流都是用于控制函数执行频率的技术。

1. 防抖函数（debounce）: 防抖函数是指在连续的一段时间内，只执行一次任务。当调用该函数后，只有当一段时间内没有再次被调用时，才会真正执行任务。如果在这段时间内又被调用了，将重新开始计时。 实现代码如下:

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

防抖函数的应用场景：

• 页面滚动和大小调整的事件处理
• autocomplete搜索框，每次输入都会发送一个请求，通过防抖可以减少请求次数
• 上传图片等需要防止用户重复操作的场合

2. 节流函数（throttle）: 节流函数是指在一段时间内，无论事件被触发多少次，它只会执行一次任务。实现代码如下:

function throttle(func, wait) {
  let timeout;
  return function() {
    const args = arguments;
    const context = this;
    if (!timeout) {
      timeout = setTimeout(() => {
        timeout = null;
        func.apply(context, args);
      }, wait);
    }
  };
}

节流函数的应用场景：

• 频繁的点击提交按钮，通过节流可以减少请求次数
• 页面滚动事件，通过节流可以减少事件触发次数
• 监听鼠标移动事件，通过节流可以减少事件触发次数