函数节流

本节目标：理解“函数节流”的核心思路，并能把它用于实际开发或面试表达。浏览器中某些计算和处理要比其他的昂贵很多。例如，DOM操作比起非DOM交互需要更多的内存和CPU时间。连续尝试进行过多的DOM相关操作可能会导致浏览器挂起，有时候甚至会崩溃。尤其在IE中使用onresize事件处理程序的时候容易发生，当调整浏览器大小的时候，该事件会连续触发。在onresize事件处理程序内部如果尝试进行DOM操作，其高频率的更改可能会让浏览器崩溃。为了绕开这个问题，你可以使用定时器对该函数进行节流。

函数节流背后的基本思想是指，某些代码不可以在没有间断的情况连续重复执行。第一次调用函数，创建一个定时器，在指定的时间间隔之后运行代码。当第二次调用该函数时，它会清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了，这个操作就没有任何意义。然而，如果前一个定时器尚未执行，其实就是将其替换为一个新的定时器。目的是只有在执行函数的请求停止了一段时间之后才执行。以下是该模式的基本形式：
var processor = {
  timeoutId: null,
  //实际进行处理的方法
  performProcessing: function () {
    // 实际执行的代码
  },
  // 初始处理调用的方法
  process: function () {
    clearTimeout(this.timeoutId);
    var that = this;
    this.timeoutId = setTimeout(function () {
      that.performProcessing();
    }, 100);
  }
};
// 尝试开始执行
processor.process();
由于setTimeout()中用到的函数的环境总是window，所以有必要保存this的引用以方便以后使用。

这个模式可以使用throttle()函数来简化，这个函数可以自动进行定时器的设置和清除，如下例：
function throttle(method, context) {
  clearTimeout(method.tId);
  method.tId = setTimeout(function () {
    method.call(context);
  }, 100);
}
throttle()函数接受两个参数：要执行的函数以及在哪个作用域中执行。上面这个函数首先清除之前设置的任何定时器。定时器id是存储在函数的tId属性中的，第一次把方法传递给throttle()的时候，这个属性可能并不存在。接下来，创建一个新的定时器，并将其id储存在方法的tld属性中。如果这是第一次对这个方法调用throttleO的话，那么这段代码会创建该属性。定时器代码使用call()来确保方法在适当的环境中执行。如果没有给出第二个参数，那么就在全局作用域内执行该方法。

前面提到过，节流在resize事件中是最常用的。如果你基于该事件来改变页面布局的话，最好控制处理的频率，以确保浏览器不会在极短的时间内进行过多的计算。例如，假设有一个＜div/＞元素需要保持它的高度始终等同于宽度。那么实现这一功能的JavaScript可以如下编写：
window.onresize = function () {
  var div = document.getElementById("myDiv");
  div.style.height = div.offsetWidth + "px";
};
这段非常简单的例子有两个何题可能会造成浏览器运行缓慢。首先，要计算offsetwidth属性，如果该元素或者页面上其他元素有非常复杂的CSS样式，那么这个过程将会很复杂。其次，设置某个元素的高度需要对页面进行回流来令改动生效。如果页面有很多元素同时应用了相当数量的CSS的话，这又需要很多计算。这就可以用到throttle()函数，如下例所示：
function resizeDiv() {
  var div = document.getElementById("myDiv");
  div.style.height = div.offsetWidth + "px";
}
window.onresize = function () {
  throttle(resizeDiv);
};
这里，调整大小的功能被放入了一个叫做resizeDiv()的单独函数中。然后onresize事件处理
程序调用throttle()并传入reaizeDiv函数，而不是直接调用resizeDiv()。多数情况下，用户是感觉不到变化的，虽然给浏览器节省的计算可能会非常大。
只要代码是周期性执行的，都应该使用节流，但是你不能控制请求执行的速率。这里展示的
throttle()函数用了 100ms作为间隔，你当然可以根据你的需要来修改它。

函数节流 ​

函数节流