防抖&节流

防抖函数

防抖,即在事件触发了 wait 的延时后才执行,但如果在 wait 期间再次执行,那么会被重置,重新开始,等于说如果我把 wait 设置为 3秒,如果3秒内我不停的触发事件,那么事件就不会被触发
function debounce(func, wait = 300) {
    let timeout = null;
    return function () {
        clearTimeout(timeout);
        timeout = setTimeout(() => {
            func.apply(this, arguments);
        }, wait);
    };
}

节流

防抖是延迟执行,而节流是间隔执行,函数节流即每隔一段时间就执行一次,实现原理为设置一个定时器,约定xx毫秒后执行事件,如果时间到了,那么执行函数并重置定时器,和防抖的区别在于,防抖每次触发事件都重置定时器,而节流在定时器到时间后再清空定时器

定时器实现:等待特定时间后执行,停止后,如果还在 wait 中,则还会执行最后一次

function throttle(func, wait=300) {
  let timeout = null
  return function() {
      if (!timeout) {
          timeout = setTimeout(() => {
              timeout = null
              func.apply(this, arguments)
          }, wait)
      }
  }
}

时间戳实现:先执行事件,再等待特定时间后执行

function throttle(func, wait) {
    let prev = 0;
    return function() {
        let now = Date.now();
        let context = this;
        let args = arguments;
        if (now - prev > wait) {
            func.apply(context, args);
            prev = now;
        }
    }
}

时间戳结合定时器:首次执行,并且最后一次也会执行

function throttle(func, wait=500) {
    let previous = 0;
    let context, args, time, remaining;    
    return function() {
      let now = +new Date();
      context = this;
      args = arguments;
      remaining = wait - (now - previous)
      if (remaining <= 0) {
        func.apply(context, args);
        previous = now
      } else {
        if (time) {
          clearTimeout(time);
        }
        time = setTimeout(() => {
          func.apply(context, args);
          time = null;
          previous = +new Date()
        }, remaining)
      }
  }
}

你可能感兴趣的:(防抖&节流)