函数节流

函数节流

代码如下:

var processor = {
  timeoutId: null,
  preformProcessing: function () {
    //实际上要进行执行的代码
  }，
  process: function () {
    clearTimeout(this.timeoutId);
    var that = this;
    // 在 setTimeout 函数内部是一个匿名函数，匿名函数的 this 指向值指向了全局作用域 
    this.timeoutId = setTimeout(function () {
      that.preformProcessing();
    }, 100)
  }
}
processor.process() // 开始执行函数

使用函数节流的思想是：假如有一个提交按钮，点击按钮执行提交操作，设置了一个延时器，在点击按钮一段时间之后执行函数，如果在这段时间内，按钮又被点击操作，process 函数会首先清除延时器，重新开始进行延时操作，为了防止用户在点击按钮进行操作的时候，触发多次提交操作，下面是一个节流函数：

function throttle (method, context) {
  clearTimeout(method.tId);
  method.tId = setTimeout(function () {
  		method.call(context)
  },100)
}

定时器使用 call 方法实现在适当的环境下执行函数，如果传入的 context 为空，那么就会在全局作用域中执行函数。

总结

使用函数节流用来防止函数在一定时间内多次被触发操作。setTimeout内的 this 指向值：

var timer = setTimeout(function () {
	console.log(this) // window
}, 2000);
timer;

因为使用 setTimeout this 值指向的是 window 全局对象，使用 es6 中的箭头函树，this 值是一样的效果。