防抖和节流

防抖和节流是前端开发中常用的优化技巧。它们的主要作用是减少特定事件的触发次数，以提高页面性能。

1. 防抖： 在一段时间内，多次触发同一事件，只执行最后一次，即在触发事件后等待指定时间间隔，如果在这个时间间隔内再次触发该事件，就取消前一次事件，重新等待一段时间。常见应用场景如搜索框，输入操作时只有用户停顿一段时间才进行搜索操作。

实现代码如下：

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

使用方法：

// fn为需要被防抖的函数，delay为延迟的时间
const debounceFunc = debounce(fn, delay);

// 调用防抖函数
debounceFunc();

2. 节流： 在一段时间内，只能触发一次事件，即在触发事件后的指定时间间隔内，都不会再执行这个函数。常见应用场景如无限滚动，监听滚动事件，在一定时间内只需触发一次加载数据。

实现代码如下：

function throttle(fn, delay) {
  let flag = true
  return function() {
    if (!flag) return;
    flag = false;
    setTimeout(() => {
      fn.apply(this, arguments)
      flag= true
    }, delay)
  }
}

使用方法：

// fn为需要被节流的函数，delay为延迟的时间
const throttleFunc = throttle(fn, delay);

// 调用节流函数
throttleFunc();