一、函数节流
一些场景下,函数有可能会被非常频繁的调用,从而造成极大的性能问题。如: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设计模式与开发实践》一书,感兴趣的可自行去查阅。