如何实现防抖和节流

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

防抖的原理是在事件被触发n秒后再执行回调函数，如果在这n秒内又触发了该事件，则重新计时。通俗的说，就是在规定时间内，如果事件被多次触发，则只执行最后一次触发的事件。适用于如搜索框输入联想、无限滚动等场景。

实现防抖的代码如下：

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

节流的原理是在一定时间内只触发一次事件，即每隔一段时间执行一次事件。适用于如页面滚动、按钮点击等场景。

实现节流的代码如下：

function throttle(fn, wait) {
  let timer = null;
  return function() {
    if (!timer) {
      timer = setTimeout(() => {
        fn.apply(this, arguments);
        timer = null;
      }, wait);
    }
  };
}

以上两个函数都是闭包函数，使用时可以直接调用函数并传入需要执行的回调函数和等待时间。