前端 防抖&节流，你学到未啊？

防抖：当一定时间内 函数多次被触发的时候，只会执行最后一次

节流：当一定时间内 执行函数时候，函数只会执行第一次，后面的不会被触发

总结：节流和防抖都是用来控制某些函数的调用频率

防抖（debounce）：

function debounce(func, delay) {
    let timeout;
    return function() {
        clearTimeout(timeout);
        timeout = setTimeout(()=>{
            func.apply(this, arguments);
        }, delay);
    }
}

节流（throttle）：

　　1.时间戳版

　　

function throttle(func, delay) {
    let last = 0;
    return function () {
        let now = Date.now();
        if (now >= delay + last) {
            func.apply(this, arguments);
            last = now;
        } else {
            console.log("距离上次调用的时间差 不满足delay要求");
        }
    }
}

　　

　　2.定时器版

// 定时器实现防抖函数
function throttle(func, delay) {
  let timer = null
  return function(){
    if(!timer) {
      func.apply(this, arguments);
      timer = setTimeout(() => {
        // 执行完毕之后，将timer置null
        timer = null      
      }, delay);
    }else{
      console.log('上一个定时器尚未结束')
    }
  }
}

　　

参考作者（copy）：大帅老猿
链接：https://juejin.cn/post/6962949488646291486
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。