成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

debounce(防抖)和throttle(節(jié)流)

ssshooter / 882人閱讀

摘要：防抖防抖，簡單來說就是防止抖動。兩者間的核心區(qū)別就在于持續(xù)觸發(fā)事件時(shí)，前者合并事件并在最后時(shí)間去觸發(fā)事件，而后者則是隔間時(shí)間觸發(fā)一次關(guān)鍵知識點(diǎn)定時(shí)器閉包資源在線測試源代碼

防抖和節(jié)流

窗口的resize、scroll，輸入框內(nèi)容校驗(yàn)等操作時(shí)，如果這些操作處理函數(shù)較為復(fù)雜或頁面頻繁重渲染等操作時(shí)，如果事件觸發(fā)的頻率無限制，會加重瀏覽器的負(fù)擔(dān)，導(dǎo)致用戶體驗(yàn)非常糟糕。此時(shí)我們可以采用debounce（防抖）和throttle（節(jié)流）的方式來減少觸發(fā)的頻率，同時(shí)又不影響實(shí)際效果。

debounce 防抖

debounce（防抖），簡單來說就是防止抖動。

從上圖中我們可以看到，當(dāng)持續(xù)觸發(fā)事件時(shí)，debounce會合并事件且不會去觸發(fā)事件，當(dāng)一定時(shí)間內(nèi)沒有觸發(fā)再這個(gè)事件時(shí)，才真正去觸發(fā)事件～ 一起來實(shí)現(xiàn)個(gè)簡單的debounce：

function debounce(fn, delay) {
  var ctx;
  var args;
  var timer = null;

  var later = function () {
    fn.apply(ctx, args);
    // 當(dāng)事件真正執(zhí)行后，清空定時(shí)器
    timer = null;
  };

  return function () {
    ctx = this;
    args = arguments;
    // 當(dāng)持續(xù)觸發(fā)事件時(shí)，若發(fā)現(xiàn)事件觸發(fā)的定時(shí)器已設(shè)置時(shí)，則清除之前的定時(shí)器
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }

    // 重新設(shè)置事件觸發(fā)的定時(shí)器
    timer = setTimeout(later, delay);
  };
}

效果圖:

throttle 節(jié)流

throttle（節(jié)流），當(dāng)持續(xù)觸發(fā)事件時(shí)，保證隔間時(shí)間觸發(fā)一次事件。

上圖中綠色塊表示觸發(fā)一次事件，持續(xù)觸發(fā)事件時(shí)，throttle會合并一定時(shí)間內(nèi)的事件，并在該時(shí)間結(jié)束時(shí)真正去觸發(fā)一次事件～ 一起來看看throttle的簡單實(shí)現(xiàn)：

function throttle(fn, delay) {
  var ctx;
  var args;
  // 記錄上次觸發(fā)事件
  var previous = Date.now();

  var later = function () {
    fn.apply(ctx, args);
  };

  return function () {
    ctx = this;
    args = arguments;
    var now = Date.now();
    // 本次事件觸發(fā)與上一次的時(shí)間比較
    var diff = now - previous - delay;

    // 如果隔間時(shí)間超過設(shè)定時(shí)間，即再次設(shè)置事件觸發(fā)的定時(shí)器
    if (diff >= 0) {
      // 更新最近事件觸發(fā)的時(shí)間
      previous = now;
      setTimeout(later, delay);
    }
  };
}

效果圖:

總結(jié)

根據(jù)實(shí)際業(yè)務(wù)場景，合理的利用debounce（防抖）和throttle（節(jié)流）可以優(yōu)化性能和提高用戶體驗(yàn)。兩者間的核心區(qū)別就在于持續(xù)觸發(fā)事件時(shí)，前者合并事件并在最后時(shí)間去觸發(fā)事件，而后者則是隔間時(shí)間觸發(fā)一次～

關(guān)鍵知識點(diǎn) 
setTimeout 定時(shí)器


w3school


Closure 閉包


ruanyifeng
資源 在線測試 源代碼

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/49935.html

相關(guān)文章

  • debounce(防抖)和throttle(節(jié)流)

    摘要：防抖防抖，簡單來說就是防止抖動。兩者間的核心區(qū)別就在于持續(xù)觸發(fā)事件時(shí)，前者合并事件并在最后時(shí)間去觸發(fā)事件，而后者則是隔間時(shí)間觸發(fā)一次關(guān)鍵知識點(diǎn)定時(shí)器閉包資源在線測試源代碼 防抖和節(jié)流 窗口的resize、scroll，輸入框內(nèi)容校驗(yàn)等操作時(shí)，如果這些操作處理函數(shù)較為復(fù)雜或頁面頻繁重渲染等操作時(shí)，如果事件觸發(fā)的頻率無限制，會加重瀏覽器的負(fù)擔(dān)，導(dǎo)致用戶體驗(yàn)非常糟糕。此時(shí)我們可以采用debo...

    2bdenny 評論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 評論0 收藏0

  • 說說JavaScript中函數(shù)的防抖 (Debounce) 與節(jié)流 (Throttle)

    摘要：基礎(chǔ)防抖我們現(xiàn)在寫一個(gè)最基礎(chǔ)的防抖處理標(biāo)記事件也做如下改寫現(xiàn)在試一下，我們會發(fā)現(xiàn)只有我們停止?jié)L動秒鐘的時(shí)候，控制臺才會打印出一行隨機(jī)數(shù)。 為何要防抖和節(jié)流 有時(shí)候會在項(xiàng)目開發(fā)中頻繁地觸發(fā)一些事件,如 resize、 scroll、 keyup、 keydown等，或者諸如輸入框的實(shí)時(shí)搜索功能，我們知道如果事件處理函數(shù)無限制調(diào)用，會大大加重瀏覽器的工作量，有可能導(dǎo)致頁面卡頓影響體驗(yàn)；后臺...

    yanwei 評論0 收藏0

  • js 防抖 節(jié)流 JavaScript

    摘要：此時(shí)需要采用防抖和節(jié)流的方式來減少調(diào)用頻率，同時(shí)不影響原來效果。函數(shù)防抖當(dāng)持續(xù)觸發(fā)事件時(shí)，一段時(shí)間段內(nèi)沒有再觸發(fā)事件，事件處理函數(shù)才會執(zhí)行一次，如果設(shè)定的時(shí)間到來之前就觸發(fā)了事件，延時(shí)重新開始。 js 防抖 節(jié)流 JavaScript 實(shí)際工作中，通過監(jiān)聽某些事件，如scroll事件檢測滾動位置，根據(jù)滾動位置顯示返回頂部按鈕；如resize事件，對某些自適應(yīng)頁面調(diào)整DOM的渲染；如ke...

    int64 評論0 收藏0

  • 徹底弄懂函數(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 評論0 收藏0

發(fā)表評論

0條評論

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