防抖节流

函数防抖

在事件被触发n秒后再执行回调，如果在n秒内被触发，则重新计时

function debunce(func,interval) {
  let timer = null;
  return function(...args) {
    let context = this;
    if(timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      func.apply(this,...args)
    },interval)
  }
}

函数节流

规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效

function throttle(func,interval) {
  let flag = true;
  return function(...args) {
    let context = this;
    if(!flag) {
      return
    }
    flag = false;
    setTimeout(() => {
      func.apply(this,...args);
      flag = true;
    },interval)
  }
}

增强版函数节流:

function addThrottle(func,delay) {
  let timer = null;
  let last = 0;
  return function(...args) {
    let context = this;
    let now = new Date();
    if(now-last < delay) {
      clearTimeout(timer);
      timer = setTimeout(()=> {
        fn.apply(this,args);
        last = now Date()
      },delay)
    } else{
      last = now;
      func.apply(context,args)
    }
  }
}

应用场景

防抖节流函数的应用场景无疑就两个字: 降频

二选一: 规定时间内触发一次和规定时间内触发则重新计时