Loading...
墨滴

魑魅魍魉

2021/03/07  阅读:13  主题:红绯

防抖&节流

防抖

防抖(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;
    }
  }
}

防抖&节流

防抖和节流的区别

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

为什么需要防抖和节流?

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

魑魅魍魉

2021/03/07  阅读:13  主题:红绯

作者介绍

魑魅魍魉