防抖、节流

205 阅读1分钟

防抖:触发高频函数事件后,n秒内函数只能执行一次,如果在n秒内这个事件再次被触发的话,那么会重新计算时间。通常使用的场景是:用户输入,只需再输入完成后做一次输入校验即可。
节流:所谓节流,就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。通常使用场景: 滚动条事件 或者 resize 事件,通常每隔 100~500 ms执行一次即可

//防抖
function debounce(func, wait){
  let timeout;
  return function(){
    if(timeout){
      clearTimeout(timeout)
    }
    timeout = setTimeout(() => {
      func.apply(this, arguments)
    }, wait)
  }}
//节流
function throttle(func, wait){
  let timeout;
  return function(){
    if(!timeout){
      timeout = setTimeout(() => {
        timeout = null;
        func.apply(this, arguments)
      }, wait)
    }
  }}