前端防抖和节流函数

一、为啥要防抖或节流？

为了优化高频率事件，比如onscroll滚动、oninput搜索框、resize窗口大小变化、onkeydown、onkeyup等等，这些高频率事件很有可能造成页面卡顿，影响用户体验。为啥高频事件就会导致页面卡顿呢？这些又跟页面的渲染有关系。

• 前端的渲染过程

  web页面的展示过程：

  Javascript -> Style -> Layout -> Paint -> Composite

  • 一般我们会使用Javascript来实现一些视觉变化的效果，比如做一个动画或添加一些dom元素；

  • Style阶段确定每个DOM应该用什么css样式规则；

  • Layout，布局，这一步具体计算每个dom元素最终在屏幕上显示的大小和位置；

  • Paint，绘制阶段，进行dom的绘制（包括绘制文字、颜色、图像、边框和阴影等dom元素所有的可视效果）。一般来说，这个绘制过程是在多个层上完成的。

  • Composite：渲染层合并，在每个层上完成绘制过程之后，浏览器会将所有层按照合理的顺序合并成一个图层，然后显示在屏幕上。（所以做一些动画效果尽量使用css3的transform等属性，因为该属性是脱离文档流，不用合并渲染层的）。

    样式变化是重绘，布局和位置变化是重排。重排一定导致重绘，重绘不一定导致重排。

    网页生成的时候，至少会渲染（Layout+Paint）一次，用户访问过程中，还会不断的重排（reflow）和重绘（repaint），用户scroll行为resize行为会导致页面不断的进行重新渲染，而且间隔频繁，容易造成浏览器卡帧。运用防抖和节流可以有效降低代码的执行效率，从而解决高频率事件的页面卡顿问题。

节流

• 什么是节流：是保证一段时间内，代码只执行一次。比如设置每一秒执行一次。

• 节流实现：

  var throttle = function(func,delay){
      var timer = null
      return function(){
          var context = this 
          var args = arguments
          if(!timer){
              timer = setTimeout(() => {
                  func.apply(context,args)
                  timer = null
              }, delay);
          }
      }
  }
  function handle(){
  
  }
  window.addEventListener('scroll',throttle(handle,1000))
  

防抖

• 什么是防抖：是在一段时间结束之后，才触发一次事件。如果一段时间内未结束再次触发了事件，那么就会重新计算这段时间。

  • 防抖实现：

    function debounce(func,wait){
        var timeout
        return function(){
            clearTimeout(timeout)
            timeout = setTimeout(func,wait)
        }
    }
    function handle(){
    
    }
    window.addEventListener('scroll',debounce(handle,1000))
    

使用场景：

• 防抖：实时搜索（keyup），拖拽（mousemove）。
• 节流：窗口调整（resize），页面滚动（scroll），抢购和疯狂点击（mousedown）

总结：

节流：在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发。

防抖：前面的所有的触发多被取消，最后一次执行在规定的时间之后才会触发，也就是说如果连续快速的触发，只会执行一次。