js防抖和节流

        在进行窗口的 resize、scroll,输入框内容校验等操作时,如果事件处理和函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕。
        此时我们可以采用 debounce (防抖) 和 throttle (节流) 的方式来减少调用的频率,同时又不影响效果。

函数防抖(debounce)

        当持续触发事件时,一定时间段内没有在触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。
        如下,持续触发 scrool 事件时,并不执行 handle 函数,当1000毫秒内没有触发 scroll 事件时,才会延时触发 scroll 事件。

           var timeout = null
           return function(){
                 if(timeout !== null) clearTimeout(timeout)
                 timeout = setTimeout(fn,wait)
           }
         }//处理函数
         function handle(){
           console.log(Math.random())
         }
         //滚动事件
         window.addEventListener('scroll',debounce(handle,1000))

函数节流(throttle)

        当持续触发事件时,保证一定时间段内只调用一次事件处理函数
        节流通俗解释就比如我们水龙头放水,闸门一打开,水哗哗的往下流,秉着勤俭节约的优良传统美德,我们要把水龙头关小点,最好是如我们心意按照一定规律在某个时间间隔内,一滴一滴的往下滴。
        如下,持续触发 scroll 事件时,并不立即执行 handle 函数,每隔 1000 毫秒才会执行一次 handle 函数。

          var prev = Date.now()
          return function(){
          var context = this
          var args = arguments
          var now = Date.now()
             if(now - prev >= delay){
               func.apply(context,args)
               prev = Date.now()
             }
          }
        }
        function handle() {console.log(Math,random())}
        window.addEventListener('scroll',throttle(handle,1000))

总结:

函数防抖:

        将几次操作合并为一次操作进行。原理是维护一个计时器,规定在延迟事件后触发函数,但是在延迟时间内再次触发的话,就会取消之前的计时器而重新设置,只有最后一次操作能被触发。

函数节流:

        使得一定时间只促发一次函数,原理是通过判断是否到达一定时间来触发函数。

两者的区别:

        函数节流不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数,而函数防抖只是在最后一次事件后触发一次函数。