成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

3fuyu / 2160人閱讀

摘要：函數(shù)節(jié)流的實(shí)現(xiàn)函數(shù)節(jié)流最普通的實(shí)現(xiàn)就是通過取摩操作來過濾部分執(zhí)行。這樣子，就實(shí)現(xiàn)了函數(shù)節(jié)流，存在復(fù)雜計(jì)算的業(yè)務(wù)邏輯運(yùn)行次數(shù)減半了。實(shí)現(xiàn)又叫函數(shù)節(jié)流，思路是控制某一個(gè)時(shí)間段執(zhí)行周期內(nèi)觸發(fā)的事件，只會(huì)執(zhí)行一次業(yè)務(wù)邏輯。

函數(shù)節(jié)流介紹

頁面在綁定resize，keydown或者mousemove這些能連續(xù)觸發(fā)的事件時(shí)，用戶只要很常規(guī)的操作，就能連續(xù)觸發(fā)多次綁定的方法。當(dāng)綁定方法里面存在大量的類似于DOM操作這種極其消耗性能的代碼時(shí)，會(huì)直接導(dǎo)致頁面運(yùn)行的卡頓。這個(gè)時(shí)候就會(huì)用到函數(shù)節(jié)流。

函數(shù)節(jié)流的實(shí)現(xiàn)

函數(shù)節(jié)流最普通的實(shí)現(xiàn)就是通過取摩操作來過濾部分執(zhí)行。參考代碼如下

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

當(dāng)?shù)谝淮斡|發(fā)并執(zhí)行mousemoveListener事件時(shí)，會(huì)打印“業(yè)務(wù)邏輯”；緊接著第二次執(zhí)行mousemoveListener事件時(shí)，由于mousemoveCount為2，會(huì)直接return掉，并不會(huì)打印“業(yè)務(wù)邏輯”。這樣子，就實(shí)現(xiàn)了函數(shù)節(jié)流，存在復(fù)雜計(jì)算的業(yè)務(wù)邏輯運(yùn)行次數(shù)減半了。

但是這種實(shí)現(xiàn)存在兩個(gè)問題：

方法的執(zhí)行頻率（或者說幀率）是不可控的。比如mousemove事件，執(zhí)行頻率由鼠標(biāo)移動(dòng)速度決定，由上面這種方式實(shí)現(xiàn)，頻率還是由鼠標(biāo)移動(dòng)速度決定。

最后一次觸發(fā)可能未執(zhí)行。比如當(dāng)最后一次觸發(fā)事件時(shí)，mousemoveCount是偶數(shù)，那么會(huì)直接return。如果業(yè)務(wù)需要最后一次必須執(zhí)行業(yè)務(wù)邏輯，則會(huì)存在bug。

所以就有了下面的優(yōu)化實(shí)現(xiàn)(throttle和debounce)。

throttle實(shí)現(xiàn)

throttle又叫函數(shù)節(jié)流，思路是控制某一個(gè)時(shí)間段(執(zhí)行周期)內(nèi)觸發(fā)的事件，只會(huì)執(zhí)行一次業(yè)務(wù)邏輯。代碼如下：

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

第一次觸發(fā)mousemove會(huì)設(shè)置100ms后執(zhí)行業(yè)務(wù)邏輯，在這之后的100ms里面觸發(fā)的mousemove都不會(huì)觸發(fā)業(yè)務(wù)邏輯。相當(dāng)于控制了mousemove事件100ms觸發(fā)一次，也就是10幀。

使用這種實(shí)現(xiàn)(throttle)，可以做到觸發(fā)頻率可控。但當(dāng)業(yè)務(wù)希望連續(xù)的觸發(fā)事件只在之后一次觸發(fā)后才執(zhí)行業(yè)務(wù)邏輯，比如resize事件，只希望窗口變化結(jié)束后才進(jìn)行業(yè)務(wù)邏輯的運(yùn)行，throttle實(shí)現(xiàn)就不適用了。這個(gè)時(shí)候就需要使用到debounce

debounce實(shí)現(xiàn)

debounce又叫函數(shù)去抖動(dòng)，思路是業(yè)務(wù)邏輯在resize不在觸發(fā)后才執(zhí)行。代碼如下：

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

但resize連續(xù)快速觸發(fā)時(shí)，業(yè)務(wù)邏輯并不會(huì)執(zhí)行。只有當(dāng)最后一次觸發(fā)resize后100ms，才執(zhí)行業(yè)務(wù)邏輯。這種情況就能實(shí)現(xiàn)只在最后一次resize觸發(fā)業(yè)務(wù)計(jì)算了。

underscore 中已經(jīng)對(duì)throttle和debounce做了實(shí)現(xiàn)和封裝， 有興趣可以去查看源碼。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/85656.html

相關(guān)文章

  • 徹底弄懂函數(shù)防抖和函數(shù)節(jié)流

    摘要：若時(shí)間差大于間隔時(shí)間，則立刻執(zhí)行一次函數(shù)。不同點(diǎn)函數(shù)防抖，在一段連續(xù)操作結(jié)束后，處理回調(diào)，利用和實(shí)現(xiàn)。函數(shù)防抖關(guān)注一定時(shí)間連續(xù)觸發(fā)的事件只在最后執(zhí)行一次，而函數(shù)節(jié)流側(cè)重于一段時(shí)間內(nèi)只執(zhí)行一次。 原博客地址，歡迎star 函數(shù)防抖和節(jié)流 函數(shù)防抖和函數(shù)節(jié)流：優(yōu)化高頻率執(zhí)行js代碼的一種手段，js中的一些事件如瀏覽器的resize、scroll，鼠標(biāo)的mousemove、mouseover...

    Mr_houzi 評(píng)論0 收藏0

  • JS進(jìn)階篇--JS函數(shù)節(jié)流（throttle）

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

    cpupro 評(píng)論0 收藏0

  • JavaScript 函數(shù)節(jié)流和函數(shù)去抖應(yīng)用場(chǎng)景辨析

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

    ZHAO_ 評(píng)論0 收藏0

  • 函數(shù)防抖Debounce和函數(shù)節(jié)流Throttle

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

    NicolasHe 評(píng)論0 收藏0

  • 談?wù)刯s中的函數(shù)節(jié)流

    摘要：為了解決這些問題，就可以使用定時(shí)器對(duì)函數(shù)進(jìn)行節(jié)流。第一次調(diào)用函數(shù)，創(chuàng)建一個(gè)定時(shí)器，在指定的時(shí)間間隔之后運(yùn)行代碼。當(dāng)?shù)诙握{(diào)用該函數(shù)時(shí)，它會(huì)清除前一次的定時(shí)器并設(shè)置另一個(gè)。 函數(shù)節(jié)流的目的 從字面上就可以理解，函數(shù)節(jié)流就是用來節(jié)流函數(shù)從而一定程度上優(yōu)化性能的。例如，DOM 操作比起非DOM 交互需要更多的內(nèi)存和CPU 時(shí)間。連續(xù)嘗試進(jìn)行過多的DOM 相關(guān)操作可能會(huì)導(dǎo)致瀏覽器掛起，有時(shí)候甚...

    sanyang 評(píng)論0 收藏0

  • 前端進(jìn)擊的巨人（八）：淺談函數(shù)防抖與節(jié)流

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

    _Zhao 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<