防抖节流

120 阅读1分钟

防抖:设定一个延迟执行的时间期限,若在期限内事件又被触发,则重新开始计时,直到周期结束,才执行函数。

function debounce(fun, delay){
    let time;
    return function () {
        if (time) {
            clearTimeout(time)
        }
        time = setTimeout(fun, delay)
    }
}

image.png

节流:在规定时间期限内,函数只执行一次,如有新的事件被触发,不会重新开始计时。直至周期结束后,又有事件触发,则开始新的周期。

function throttle() {
    let canExe = true;
    return function () {
        if (!canExe) {
            return false;
        }
        canExe = false;
        setTimeout(() => {
            fun();
            canExe = true;
        });
    }
}

image.png

立即执行版

防抖
  function debounce(fn, time, isRun){
    let timer = null;
    return function(arg){
      if(timer){
        clearTimeout(timer)
      }else{
        isRun && fn(arg)
      }
      timer = setTimeout(()=>{
        timer = null;
      }, time)
    }
  }
  
  节流
 function throttle(fn, time, isRun){
    let timer = null;
    return function(arg){
      if(!timer){
        isRun && fn(arg)
        timer = setTimeout(()=>{
          timer = null;
        }, time)
      }
    }
  }