JavaScript（九）：函数防抖和节流

前言

一些浏览器事件，window.onresize、window.onmousemove等，触发的频率非常高，会造成浏览器性能问题；如果向后台发送请求，频繁出发，也会对服务器造成不必要的压力。

那么如何限制事件处理函数频繁调用呢？
就是函数节流和函数防抖

函数节流（throttle）

函数触发后，会立即执行一次函数，若多次持续触发事件，则会在多次触发的这个时间内，每隔一段时间执行一次。
适合多次事件按照时间做平均分配触发

使用场景

窗口调整（resize）
页面滚动（scroll）
DOM元素拖拽功能实现（mousemove）
抢购疯狂点击（click）

自定义throttle函数

1、时间戳版

function throttle(fn , delay){
   
      let pre = 0

      return function(){
   
        let now = Date.now();
        let that = this
        let args = arguments
        
        if(now - pre >= delay){
   
          fn.apply(that , args)
          pre = now
        }
      }
    }

1、定时器版

function throttle