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()函数最多只会触发函数一次。


             ——————————
                ① 节流,一种处理连续重复执行的操作的策略。旨在限制无间断地重复执行函数或者事件。——译者注
   437   438   439   440   441   442   443   444   445   446   447