函数节流 Throttle

浏览器中某些计算和处理要比其他的昂贵的多。例如，DOM操作比起非DOM交互需要更多的内存和CPU时间。连续尝试进行过多的DOM相关操作可能会导致浏览器挂起，有时候甚至会崩溃。在onresize事件处理程序内部如果尝试进行DOM操作，其高频率的更改可能会让浏览器崩溃。为了绕开这个问题，你可以使用定时器对该函数进行节流。

// 节流函数
function throttle (method, context) {
  clearTimeout(method.tId);
  method.tId = setTimeout(function(){
    method.call(context);
  }, 100)
}
// 调用方式示例
function resizeDiv () {
  var div = document.getElementById("myDiv");
  div.style.height = div.offsetWidth + "px";
}
window.onresize = function () {
  throttle(resizeDiv);
}

函数节流背后的基本思想是指，某些代码不可以在没有间断的情况下连续重复执行。第一次调用函数，创建一个定时器，在指定的时间间隔后运行代码。当第二次调用该函数时，它会清楚前一次的定时器并设置另一个。

ps: 使用时可根据实际情况添加时间间隔参数