codeonpaper

防抖函数

防抖函数特点：对于不断触发的事件，当用户停止一段时间后触发。

例如：在检查用户昵称时，不用用户一输入就检查，而是等用户停下来一段时间之后验证：

function handleCheck(e){
  console.log("checking...");
}

let timer = null;
document.querySelector("input").onchange = function(e){
  clearTimeout(timer);
  timer = setTimeout(()=>{
    handleCheck(e);
  }, 1000);
}

以上方法会暴露 timer为全局变量，并且每次都要写一大段内容，使用闭包封装防抖函数：

function handleCheck(e){
  console.log("checking...");
}

function debounce(handler, delay=1000){
  let timer = null;
  return function(...args){
    clearTimeout(timer);
    timer = setTimeout(()=>{
      handler.apply(this, args);
    }, delay);
  }
}

document.querySelector("input").onclick = debounce(handleCheck);

节流函数

节流函数特点：只有距离上次成功执行超过一定时间才能执行，一般用于缓解高频事件。

例如：用户滚动滚轮的时候，每 0.1s 触发事件。

function handleScroll(e){
  console.log("checking...");
}

function throttle(handler, delay=100){
  let start = new Date();
  return function(...args){
    const now = new Date();
    if(now-start>=delay){
      handler.apply(this, args);
      start = now;
    }
  }
}

window.onscroll = throttle(handleScroll);