前端防抖与节流

前端防抖与节流

防抖定义: 触发后在n秒内，只执行一次，若在n秒内再次触发则重新计算!

code演示

 function debounce(fn,delay=300){
    let timer;
    return function (){
      if(timer){
        clearTimeout(timer)
      }
      timer=setTimeout(()=>{
        fn();
      },delay)
    }
  }
  input.onkeyup=debounce(()=>{
    
  },1000)

---

节流定义: 连续发生的事件在n秒内只执行一次

code演示
 

  function throttle(fn,delay=300){
    let timer;
    return function (...args){
      if(timer){
        return;
      }
      timer=setTimeout(()=>{
        fn(...args);
        timer=null;
      },delay)
    }
  }
  owrap.ondrag=throttle((e)=>{
    console.log(e.offsetX,e.offsetY);
  },1000)

---