防抖

防抖（debounce）

• 触发高频事件后 n 秒内函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间。

防抖可以用在哪些地方？

• 操作按钮、搜索框...

function debounce(handler, dely = 800){
let timer = null;
  return function(){
    clearInterval(timer);
    timer = setTimeout(() => {
      handler.apply(this, arguments);
    }, dely);
  }
}

节流

节流(thorttle)

• 高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率。

function throttle(handler, wait = 800) {
  let lastTime = 0;
  return function () {
    let newTime = new Date().getTime();
    if (newTime - lastTime > wait) {
      handler.apply(this, arguments);
      lastTime = newTime;
    }
  }
}

防抖&节流

防抖和节流的区别

• 防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。

为什么需要防抖和节流？

• 缓解服务器压力，防止用户频繁操作导致向服务器多次发送请求。
• 我们经常会需要绑定一些持续触发的事件，但是我们并不希望在事件持续触发的过程中那么频繁地去执行函数。