节流与防抖的记录

防抖

防抖的定义

防抖即：触发高频事件后n秒内，函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。
应用场景：input搜索：当用户停止输入，则执行搜索，如果用户一直输入则一直不执行。

防抖的函数封装

const debounce = function(func,timeout){
    let timer = null                      
    return function () {              
      if(timer) clearTimeout(timer)       // 如果timer存在，则抛弃上一个timer，用最后一个timer执行
      timer = setTimeout(()=>{            
        func.apply(this,arguments)
        timer = null
      },timeout)
    }
}
<input onInput={debounce(onBtnClick,200)} />    

节流

节流的定义

节流即：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。
应用场景：拖拽、屏幕拖动缩放

节流的函数封装

const throttle = function(func, timeout){
    let timer = null
    return function(){
      if(timer) return                  // 如果timer存在，则return，因为n秒内只能执行一次
      timer = setTimeout(()=>{
        func.apply(this, arguments)
        timer = null
      },timeout)
    }
}
window.addEventListener('resize', throttle(()=>{ console.log('你在拖动屏幕') },300))