轻松下午茶-手撕系列：节流throttle

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

轻松下午茶：  UnderScore为js提供了100多个函数，今天我们来撕throttle，看看throttle背后实现的原理。

先谈谈throttle的功能：节流就是限定在某一个时间点段内无论点击多少次，但是最后结果只会触发一次，从而实现节流。 在官方文档中是这样描述throttle的：

_.throttle(function, wait, [options]) 创建并返回一个像节流阀一样的函数，当重复调用函数的时候，至少每隔 wait 毫秒调用一次该函数。对于想控制一些触发频率较高的事件有帮助。

所以如何实现这个功能呢？当我们第一次触发例如鼠标点击事件时，我们可以先获取当前的时间并且将这个时间记录下来，然后当下次再次触发鼠标点击事件的时候，再去获取第二次触发点击鼠标事件的时间，然后观察这个两个时间的时间差，判断如果这个时间差大于设定的wait时间，那么就执行这个函数。

  function throttle(fn,wait){  
    var pre=0 //记录上一次的时间戳

    return function(){
      var now=+new Date()  //获取当前触发事件时的时间戳
      if(now-pre>wait){   //判断这两次触发事件的时间差，如果这次的时间戳减去上次的时间戳大于设定的wait时间，那么就执行fn，并且将pre上的时间戳重新更新
        pre=now
      }
    }
  }

thtottle函数的思路就是用一个变量来记录上一次的时间戳，然后返回出一个函数，获取当前触发事件的时间戳，判断时间差，再决定是否执行函数。当然这样写会改变参数fn中this以及js中事件执行的回调函数(js中提供的事件执行的回调函数里面一定会有一个事件参数)里面事件参数event的指向，所以完美一点：

function throttle(fn, wait) {
    var pre = 0
  
    return function() {
      const context = this
      const args = arguments
  
      var now = +new Date()    
      if (now - pre > wait) {
        fn.apply(context, args)
        pre = now
      }
      
    }
  }