手写节流和防抖

94 阅读1分钟
节流

考虑一个场景,滚动事件中会发起网络请求,但是我们并不希望用户在滚动过程中一直发起请求,而是隔一段时间发起一次,对于这种情况我们就可以使用节流。

    function throttle(func,wait=50){
         let lasttime = 0;
         return function(...args){
          let now =+ new Date()
          if(now-lasttime>wait){
             lasttime  = now
             func.apply(this,...args)
             
           }
         }
    }
    
    setInterval(
         throttle(()=>{
            console.log(1)
        },500),
        1
    )
       
    
防抖

考虑一个场景,有一个按钮点击会触发网络请求,但是我们并不希望每次点击都发起网络请求,而是当用户点击按钮一段时间后没有再次点击的情况才去发起网络请求,对于这种情况我们就可以使用防抖。

    function debounce(func,wait=50){
        let timer = 0;
        return function(...args){
        if(timer) clearTimeout(timer)
            timer = setTimeout(()=>{
                func.apply(this,...args)
            },wait)
        }
    }