国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

函數節流

3fuyu / 2126人閱讀

摘要：函數節流的實現函數節流最普通的實現就是通過取摩操作來過濾部分執行。這樣子，就實現了函數節流，存在復雜計算的業務邏輯運行次數減半了。實現又叫函數節流，思路是控制某一個時間段執行周期內觸發的事件，只會執行一次業務邏輯。

函數節流介紹

頁面在綁定resize，keydown或者mousemove這些能連續觸發的事件時，用戶只要很常規的操作，就能連續觸發多次綁定的方法。當綁定方法里面存在大量的類似于DOM操作這種極其消耗性能的代碼時，會直接導致頁面運行的卡頓。這個時候就會用到函數節流。

函數節流的實現

函數節流最普通的實現就是通過取摩操作來過濾部分執行。參考代碼如下

javascriptvar mousemoveCount = 0;
function mousemoveListener(e){
  mousemoveCount++;
  if(mousemoveCount % 2 === 0){
    return;
  }
  console.info("業務邏輯");
}

當第一次觸發并執行mousemoveListener事件時，會打印“業務邏輯”；緊接著第二次執行mousemoveListener事件時，由于mousemoveCount為2，會直接return掉，并不會打印“業務邏輯”。這樣子，就實現了函數節流，存在復雜計算的業務邏輯運行次數減半了。

但是這種實現存在兩個問題：

方法的執行頻率（或者說幀率）是不可控的。比如mousemove事件，執行頻率由鼠標移動速度決定，由上面這種方式實現，頻率還是由鼠標移動速度決定。

最后一次觸發可能未執行。比如當最后一次觸發事件時，mousemoveCount是偶數，那么會直接return。如果業務需要最后一次必須執行業務邏輯，則會存在bug。

所以就有了下面的優化實現(throttle和debounce)。

throttle實現

throttle又叫函數節流，思路是控制某一個時間段(執行周期)內觸發的事件，只會執行一次業務邏輯。代碼如下：

javascriptvar lastMousemoveTime = 0, mousemoveTime = 100;
function mousemoveListener(e){
  var now = new Date().getTime();
  if(now - lastMousemoveTime <= mousemoveTime) {
    return;
  }
  lastMousemoveTime = now;
  setTimeout(function(){
    console.info("業務邏輯");
  }, mousemoveTime);
}

第一次觸發mousemove會設置100ms后執行業務邏輯，在這之后的100ms里面觸發的mousemove都不會觸發業務邏輯。相當于控制了mousemove事件100ms觸發一次，也就是10幀。

使用這種實現(throttle)，可以做到觸發頻率可控。但當業務希望連續的觸發事件只在之后一次觸發后才執行業務邏輯，比如resize事件，只希望窗口變化結束后才進行業務邏輯的運行，throttle實現就不適用了。這個時候就需要使用到debounce

debounce實現

debounce又叫函數去抖動，思路是業務邏輯在resize不在觸發后才執行。代碼如下：

javascriptvar resizeTimer = null;
function resizeListener(e){
  if(resizeTimer) {
    clearTimerout(resizeTimer);
  }
  resizeTimer = setTimeout(function(){
    console.info("業務邏輯");
  }, 100);
}

但resize連續快速觸發時，業務邏輯并不會執行。只有當最后一次觸發resize后100ms，才執行業務邏輯。這種情況就能實現只在最后一次resize觸發業務計算了。

underscore 中已經對throttle和debounce做了實現和封裝， 有興趣可以去查看源碼。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/85656.html

相關文章

  • 徹底弄懂函數防抖和函數節流

    摘要：若時間差大于間隔時間，則立刻執行一次函數。不同點函數防抖，在一段連續操作結束后，處理回調，利用和實現。函數防抖關注一定時間連續觸發的事件只在最后執行一次，而函數節流側重于一段時間內只執行一次。 原博客地址，歡迎star 函數防抖和節流 函數防抖和函數節流：優化高頻率執行js代碼的一種手段，js中的一些事件如瀏覽器的resize、scroll，鼠標的mousemove、mouseover...

    Mr_houzi 評論0 收藏0

  • JS進階篇--JS函數節流（throttle）

    摘要：函數節流的原理函數節流的原理挺簡單的，估計大家都想到了，那就是定時器。在高級程序設計一書有介紹函數節流，里面封裝了這樣一個函數節流函數，它把定時器存為函數的一個屬性個人的世界觀不喜歡這種寫法。 什么是函數節流？ 介紹前，先說下背景。在前端開發中，有時會為頁面綁定resize事件，或者為一個頁面元素綁定拖拽事件（其核心就是綁定mousemove），這種事件有一個特點，就是用戶不必特地搗亂...

    cpupro 評論0 收藏0

  • JavaScript 函數節流和函數去抖應用場景辨析

    摘要：函數節流和去抖的出現場景，一般都伴隨著客戶端的事件監聽。函數節流的核心是，讓一個函數不要執行得太頻繁，減少一些過快的調用來節流。 概述 也是好久沒更新 源碼解讀，看著房價蹭蹭暴漲，心里也是五味雜陳，對未來充滿恐懼和迷茫 ...（敢問一句你們上岸了嗎） 言歸正傳，今天要介紹的是 underscore 中兩個重要的方法，函數節流和函數去抖。這篇文章不會涉及具體的代碼實現（關于代碼實現請期...

    ZHAO_ 評論0 收藏0

  • 函數防抖Debounce和函數節流Throttle

    摘要：函數節流函數防抖函數節流和函數防抖函數節流和函數防抖二者很容易被混淆起來。函數防抖函數在特定的時間內不被再調用后執行。一句話概括函數節流是從用戶開始輸入就開始計時，而函數節流是從用戶停止輸入開始計時。 函數節流 & 函數防抖 函數節流和函數防抖 函數節流和函數防抖二者很容易被混淆起來。下面貼英文原文，建議認真閱讀：Debouncing enforces that a function ...

    NicolasHe 評論0 收藏0

  • 談談js中的函數節流

    摘要：為了解決這些問題，就可以使用定時器對函數進行節流。第一次調用函數，創建一個定時器，在指定的時間間隔之后運行代碼。當第二次調用該函數時，它會清除前一次的定時器并設置另一個。 函數節流的目的 從字面上就可以理解，函數節流就是用來節流函數從而一定程度上優化性能的。例如，DOM 操作比起非DOM 交互需要更多的內存和CPU 時間。連續嘗試進行過多的DOM 相關操作可能會導致瀏覽器掛起，有時候甚...

    sanyang 評論0 收藏0

  • 前端進擊的巨人（八）：淺談函數防抖與節流

    摘要：隆重請出主角防抖與節流。防抖與節流的異同相同都是防止某一時間段內，函數被頻繁調用執行，通過時間頻率控制，減少回調函數執行次數，來實現相關性能優化。參考文章分鐘理解的節流防抖及使用場景函數防抖和節流 showImg(https://segmentfault.com/img/bVburM8?w=800&h=600); 本篇課題，或許早已是爛大街的解讀文章。不過春招系列面試下來，不少伙伴們還...

    _Zhao 評論0 收藏0

發表評論

0條評論

3fuyu

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<