一、函数节流
一些场景下，函数有可能会被非常频繁的调用，从而造成极大的性能问题。如：window.onresize事件、mousemove事件（拖拽）、上传进度等。以上场景中的共同问题就是函数被触发的频率太高了，解决方案就是需要我们按时间来忽略掉一些事件请求，比如在500ms内只打印一次。显然，可以使用setTimeout来完成。
代码实现（throttle），原理为即将被执行的函数用setTimeout延迟执行一段时间，如果该次延迟执行还没有完成，则忽略接下来调用该函数的请求。throttle 函数接受2 个参数，第一个参数为需要被延迟执行的函数，第二个参数为延迟执行的时间。具体实现代码如下：
var throttle = function ( fn, interval ) { var __self = fn, // 保存需要被延迟执行的函数引用 timer, // 定时器 firstTime = true; // 是否是第一次调用 return function () { var args = arguments, __me = this; 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 );
二、分时函数
一个例子是创建WebQQ的QQ好友列表，如果列表中有成百上千的好友，一个好友用一个节点来表示，则当我们在页面中渲染这个列表的时候，可能要一次性往页面中创建成百上千个节点。在短时间内往页面中大量添加DOM节点显然也会让浏览器吃不消，我们看到的结果往往就是浏览器的卡顿甚至假死。
解决方案之一是下面的timeChunk函数，此函数让创建节点的工作分批进行，如把1秒钟创建1000个节点，改为每隔200毫秒创建8个节点。
timeChunk函数接受3个参数，第一个参数是创建节点时需要用到的数据，第2个参数是封装了创建节点逻辑的函数，第3个参数表示每一批创建的节点数量。代码如下：
var timeChunk = function( ary, fn, count ){ var obj, t; var len = ary.length; var start = function(){ for ( var i = 0; i < Math.min( count || 1, ary.length ); i++ ){ var obj = ary.shift(); fn( obj ); } }; return function(){ t = setInterval(function(){ if ( ary.length === 0 ){ // 如果全部节点都已经被创建好 return clearInterval( t ); } start(); }, 200 ); // 分批执行的时间间隔，也可以用参数的形式传入 }; };
最后我们进行一些小测试，假设我们有1000 个好友的数据，我们利用timeChunk 函数，每一
批只往页面中创建8 个节点：
var ary = []; for ( var i = 1; i <= 1000; i++ ){ ary.push( i ); }; var renderFriendList = timeChunk( ary, function( n ){ var div = document.createElement( 'div' ); div.innerHTML = n; document.body.appendChild( div ); }, 8 ); renderFriendList();
三、惰性加载函数
在Web 开发中，因为浏览器之间的实现差异，一些嗅探工作总是不可避免。比如我们需要
一个在各个浏览器中能够通用的事件绑定函数addEvent，常见的写法如下：
var addEvent = function( elem, type, handler ){ if ( window.addEventListener ){ return elem.addEventListener( type, handler, false ); } if ( window.attachEvent ){ return elem.attachEvent( 'on' + type, handler ); } };
这个函数的缺点是，当它每次被调用的时候都会执行里面的if 条件分支，虽然执行这些if
分支的开销不算大，但也许有一些方法可以让程序避免这些重复的执行过程。
解决方案：惰性载入函数方案。此时addEvent 依然被声明为一个普通函数，在函数里依然有一些分支判断。但是在第一次进入条件分支之后，在函数内部会重写这个函数，重写之后的函数就是我们期望的addEvent 函数，在下一次进入addEvent 函数的时候，addEvent函数里不再存在条件分支语句：
<html>
<body>
<div id="div1">点我绑定事件</div>
<script>
var addEvent = function( elem, type, handler ){
if ( window.addEventListener ){
addEvent = function( elem, type, handler ){
elem.addEventListener( type, handler, false );
}
}else if ( window.attachEvent ){
addEvent = function( elem, type, handler ){
elem.attachEvent( 'on' + type, handler );
}
}
addEvent( elem, type, handler );
};
var div = document.getElementById( 'div1' );
addEvent( div, 'click', function(){
alert (1);
});
addEvent( div, 'click', function(){
alert (2);
});
</script>
</body>
</html>
高阶函数的使用还有柯里化、实现AOP等。
以上内容来自于《JavaScript设计模式与开发实践》一书，感兴趣的可自行去查阅。