javaScript中的函数大多数情况下都是由用户主动调用触发的，除非是函数本身的实现不合理，否则我们一般不会遇到跟性能有关的问题。但是在一些少数的情况下，函数的触发不是由用户直接控制的。在这些场景下，函数由可能被频繁调用，造成大的性能问题。
1、函数被频繁调用的场景
(1)window.onresize事件。我们给window对象绑定了resize事件，当浏览器窗口大小改变的时候，事件调用频率非常高，并且在window.onresize事件有和DOM相关的操作，会造成页面卡顿。 （2）mousemove事件。如果我们给一个div节点绑定了拖拽事件，也会频繁的触发拖拽事件。
2、函数节流的原理
上面提到的两种场景都是函数被频繁的调用。 函数节流的实现原理就是在一定的时间段内忽略一些事件的请求，比如设置在500ms内只调用一次。很显然，setTimeout可以很完美的协助我们完善这个事情。
3、函数节流代码实现
<!DOCTYPE html>
<html>
<head>
<title>函数节流</title>
</head>
<body>
</body>
<script type="text/javascript">
var throttle = function(fn, interval) {
var _self = fn, // 保存需要被延迟执行的函数的引用
timer, // 定时器
firstTime = true; // 是否是第一次
return function() {
var args = arguments,
_me = this;
console.log(args);
// 如果第一次被调用，不需要被延迟
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);
}
}
window.onresize = throttle(function() {
console.log(1);
}, 500);
</script>
</html>
