Page 442 - AngularJS权威教程
P. 442
422 第 32 章 优化 Angular 应用
var events = data.events;
for(var i = 0;l i < events.length; i++) {
var event = events[i];
if(servie.handlers[event])
for(handler in service.handlers[event])
$rootScope.$apply(function() {
handler.apply(event);
});
}
// 设置下一个延时
setTimeout(pollForEvent, timeout);
});
};
// 每半秒轮询一次
setTimeout(function() { pollForEvent(500); });
var service = {
handlers: {},
on: function(evt, callback) {
if(!service.handlers[evt])
service.handlers[evt] = [];
service.handlers[evt].push(callback);
}
}
return service;
});
这段代码的主要问题在于,每个独立事件被触发时就会结束运行$rootScope.$apply()方
法,这会导致每秒产生很多$digest循环。
①
限制每秒钟$digest循环的数量是提升应用性能的一个很好方式。你可以使用事件节流 的方
式设置一个每秒触发事件的最大次数。
// 节流函数
var throttle = function(fn, atMost, ctx) {
var ctx = ctx || this;
var atMost = atMost || 250; // 毫秒
var last, defer, result;
return function() {
var now = new Date(),
args = arguments;
if (last && now < last + atMost) {
// 延迟执行
clearTimeout(defer);
defer = setTimeout(function() {
last = now;
fn.apply(ctx, args);
}, atMost);
} else {
result = fn.apply(ctx, args);
}
return result;
}
}
在每个atMost生命周期内,这个比较丑陋的throttle()函数最多只会触发函数一次。
——————————
① 节流,一种处理连续重复执行的操作的策略。旨在限制无间断地重复执行函数或者事件。——译者注