隨筆-5  評論-1  文章-0  trackbacks-0

           

          函數(shù)節(jié)流技術(shù)的主要思路是,通過一個定時器,阻斷連續(xù)重復(fù)的函數(shù)調(diào)用。對于我們自己內(nèi)部使用的函數(shù),這通常意義不大,也不推薦使用這個技術(shù),它可能會丟失對某些數(shù)據(jù)的處理。但是對于在用戶界面調(diào)用的函數(shù),卻非常有意義。例如一個 mousemove 或者 IE 中 resize 事件的監(jiān)聽函數(shù)。

          JavaScript 函數(shù)節(jié)流

          這類事件監(jiān)聽函數(shù)往往伴隨著兩個主要特征:1. 短時間內(nèi)連續(xù)多次重復(fù)觸發(fā) ; 2. 大量的 DOM 操作。眾所周知,DOM 操作對內(nèi)存和 CPU 的開銷是比較大的,特別是當(dāng)同時滿足特征1時,往往給瀏覽器造成不小的壓力。函數(shù)節(jié)流技術(shù)的意義在于在用戶察覺范圍外,降低函數(shù)調(diào)用的頻率,從而提升性能。

          這個技巧的大概模式如下面這樣:

           1 var processor = {
           2     timeoutId: null,
           3                    
           4     performProcessing: function(){
           5             // 要執(zhí)行的代碼
           6     },
           7 
           8     process: function(){
           9         clearTimeout(this.timeoutId);
          10         this.timeoutId  = setTimeout(function(){
          11             processor.performProcessing();
          12         }, 100);
          13     }
          14 };
          15                    
          16 //調(diào)用
          17 processor.process();
          performProcessing 是真正要調(diào)用的函數(shù),而程序的入口在 process,每次進(jìn)入 process,真正要調(diào)用的函數(shù) performProcessing 都會被延遲 100 毫秒執(zhí)行,如果在此期間,process 再次被調(diào)用,則會重置前一次的計時器,重新開始計時,這樣保證了 performProcessing 中的代碼至少要間隔 100 毫秒才會被執(zhí)行一次,原理非常的簡單,下面這個函數(shù)也是利用這個原理,通過閉包達(dá)到了同樣的目的,它接受兩個參數(shù),第一個是要真正要執(zhí)行的函數(shù),第二個是間隔的時間。
          function throttle(fn, delay) {
              var timer = null;
              return function () {
                  var context = this, args = arguments;
                  clearTimeout(timer);
                  timer = setTimeout(function () {
                  fn.apply(context, args);
              }, delay);
            };
          }

          另外,有人為 jQuery 寫了相同功能的插件:點擊這里傳送到 jQuery plugins

          Google Closure Library 也有類似的 API:點擊這里傳送到 Google Code

          posted on 2011-09-28 15:50 古木天琪 閱讀(257) 評論(0)  編輯  收藏 所屬分類: jQuery技術(shù)HTML5技術(shù)前端開發(fā)
          主站蜘蛛池模板: 庄浪县| 团风县| 保德县| 阿勒泰市| 田阳县| 马关县| 赞皇县| 五峰| 泸水县| 奇台县| 西畴县| 大厂| 温州市| 辽源市| 张家港市| 广河县| 西盟| 古丈县| 宜都市| 建昌县| 银川市| 石首市| 辽中县| 黄山市| 织金县| 阿拉善左旗| 肇东市| 东兴市| 巴彦淖尔市| 湖州市| 自治县| 兰西县| 吉隆县| 盘锦市| 浮梁县| 霞浦县| 余干县| 宜州市| 云梦县| 龙口市| 松阳县|