JS防抖和节流

JS中的防抖和节流是解决某些高频率触发的事件（如：浏览器resize、scroll、input等）造成性能浪费和卡顿的问题的方法。

• 防抖（debounce）

 指触发事件后在一定时间内不断将触发的事件拦截，等待一定时间后执行，如果在这个等待时间内再次触发，则重新计时，直到等待时间结束才执行相应操作。

下面是一个简单的防抖函数示例：

function debounce(fn, wait) {
  let timer = null;
  return function() {
    if (timer !== null) {
      clearTimeout(timer);
    }
    timer = setTimeout(fn, wait);
  }
}

• 节流（throttle）

指在一定时间内只触发一次事件，即减少事件触发的频率。在一定时间内只执行一次操作，无论触发多少次事件。

下面是一个简单的节流函数示例：

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

• 两种方式的差别

防抖是在等待时间结束之后执行一次操作，而节流是一定时间内只执行一次操作。所以，在一些频繁执行操作的场景下，如果需要在最后一次操作完成后立即执行，可以选择防抖函数；如果需要在一段时间内平均分配执行操作，可以选择节流函数。