JS防抖、节流

在实际开发过程中经常会遇到防抖节流的问题，
处理不当或者放任不管就容易引起浏览器卡死。
场景：点击事件（click，mounsedown），滚动（scroll）事件，窗口大小改变事件（resize）等

一、简单版

防抖(debounce)

在一定时间内频繁触发，只执行最后一次

/*
* fn [function] 需要防抖的函数
* delay [number] 毫秒，防抖期限值
*/
function debounce(fn,delay){
  let timer = null;
  return ()=>{
    if(timer){
      clearTimeout(timer)
      timer = setTimeout(()=>{
        fn()
      },delay || 1500)
    }
  }
}

节流(throtte)

在一定时间内频繁触发，只执行第一次触发的事件

/*
*  fn[function] 需要节流的函数
*  delay[number] 毫秒，节流期限值
*/
function throtte(fn,delay){
  let disbale = false;
  return ()=>{
    if(!disable){
      disable = true;
      setTimeout(()=>{
        fn()
        disable = false;
      },delay)
    }
  }
}

二、优化版

2.1 arguments传递参数,apply调整this的指向

    
        
        
        
    
    
        点击