# 函数节流

定义:连续触发的时间,只能在 n 秒钟内执行一次。

比如我们给 window.onresize 绑定的一个行为。我们的主要目的是响应窗口的大小变化重绘组件尺寸。 但 window.onresize 这个时间响应的非常灵敏,用户在不断拖动窗体大小的时候我们的应用就会随之不停的重绘。

这样的性能实在是太糟糕了,所以就需要一个给这个动作 减速 的函数。在这里我们称之为 函数节流

实现原理很简单,就是定义一个定时器,如果一个时间段内函数已经被调用过了就不在调用了。

实现

var throttle = function(fn, interval) {
  var __self = fn
  var timer  = null
  var firstTime = true
  return function() {
    var me = this;
    var args = arguments;
    if (firstTime) {
      __self.apply(me, args)
      return firstTime = false;
    }
    if (timer) {
      return false
    }
    timer = setTimeout(function() {
      clearTimeout(timer);
      timer = null;
      __self.apply(me, args)
    }, interval || 500)
  }
}
上次更新: 10/20/2020, 1:19:52 AM