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

資訊專欄INFORMATION COLUMN

JS簡單實現(xiàn)防抖和節(jié)流

MRZYD / 1417人閱讀

摘要：定時器實現(xiàn)當觸發(fā)事件的時候，我們設(shè)置一個定時器，再觸發(fā)事件的時候，如果定時器存在，就不執(zhí)行直到秒后，定時器執(zhí)行執(zhí)行函數(shù)，清空定時器，這樣就可以設(shè)置下個定時器。當最后一次停止觸發(fā)后，由于定時器的延遲，可能還會執(zhí)行一次函數(shù)。

一、什么是防抖和節(jié)流

Ps: 比如搜索框，用戶在輸入的時候使用change事件去調(diào)用搜索，如果用戶每一次輸入都去搜索的話，那得消耗多大的服務(wù)器資源，即使你的服務(wù)器資源很強大，也不帶這么玩的。

1. 防抖 - debounce

其中一種解決方案就是每次用戶停止輸入后，延遲超過500ms時，才去搜索此時的String，這就是防抖。

原理：將若干個函數(shù)調(diào)用合成為一次，并在給定時間過去之后僅被調(diào)用一次。

代碼實現(xiàn)：

function debounce(fn, delay) {
  // 維護一個 timer，用來記錄當前執(zhí)行函數(shù)狀態(tài)
  let timer = null;

  return function() {
    // 通過 ‘this’ 和 ‘a(chǎn)rguments’ 獲取函數(shù)的作用域和變量
    let context = this;
    let args = arguments;
    // 清理掉正在執(zhí)行的函數(shù)，并重新執(zhí)行
    clearTimeout(timer);
    timer = setTimeout(function() {
      fn.apply(context, args);
    }, delay);
  }
}
let flag = 0; // 記錄當前函數(shù)調(diào)用次數(shù)
// 當用戶滾動時被調(diào)用的函數(shù)
function foo() {
  flag++;
  console.log("Number of calls: %d", flag);
}

// 在 debounce 中包裝我們的函數(shù)，過 2 秒觸發(fā)一次
document.body.addEventListener("scroll", debounce(foo, 2000));

debounce函數(shù)封裝后，返回內(nèi)部函數(shù)


每一次事件被觸發(fā)，都會清除當前的timer然后重新設(shè)置超時并調(diào)用。這會導(dǎo)致每一次高頻事件都會取消前一次的超時調(diào)用，導(dǎo)致事件處理程序不能被觸發(fā)


只有當高頻事件停止，最后一次事件觸發(fā)的超時調(diào)用才能在delay時間后執(zhí)行
2. 節(jié)流 - throttle

另一種解決方案比 防抖 要寬松些，這時我們不想用戶一味的輸入，而是給用戶一些搜索提示，所以在當中限制每過500ms就查詢一次此時的String，這就是節(jié)流。

原理：節(jié)流函數(shù)不管事件觸發(fā)有多頻繁，都會保證在規(guī)定時間內(nèi)一定會執(zhí)行一次真正的事件處理函數(shù)。

代碼實現(xiàn)有兩種，一種是時間戳，另一種是定時器
1）時間戳實現(xiàn)：

function throttle(func, delay){
  let prev = Date.now();
  return function(){
    const context = this;
    const args    = arguments;
    const now     = Date.now();
    if(now - prev >= delay){
      func.apply(context, args);
      prev = Date.now();
    }
  }
}
當高頻事件觸發(fā)時，第一次應(yīng)該會立即執(zhí)行（給事件綁定函數(shù)與真正觸發(fā)事件的間隔如果大于delay的話），而后再怎么頻繁觸發(fā)事件，也都是會每delay秒才執(zhí)行一次。而當最后一次事件觸發(fā)完畢后，事件也不會再被執(zhí)行了。

2）定時器實現(xiàn)：
當觸發(fā)事件的時候，我們設(shè)置一個定時器，再觸發(fā)事件的時候，如果定時器存在，就不執(zhí)行；直到delay秒后，定時器執(zhí)行執(zhí)行函數(shù)，清空定時器，這樣就可以設(shè)置下個定時器。

fucntion throttle(func, delay){
  let timer = null;

  return funtion(){
    let context = this;
    let args    = arguments;
    if(!timer){
      timer = setTimeout(function(){
        func.apply(context, args);
        timer = null;
      }, delay);
    }
  }
}
當?shù)谝淮斡|發(fā)事件時，肯定不會立即執(zhí)行函數(shù)，而是在delay秒后才執(zhí)行。
之后連續(xù)不斷觸發(fā)事件，也會每delay秒執(zhí)行一次。
當最后一次停止觸發(fā)后，由于定時器的delay延遲，可能還會執(zhí)行一次函數(shù)。

3）綜合使用時間戳與定時器，完成一個事件觸發(fā)時立即執(zhí)行，觸發(fā)完畢還能執(zhí)行一次的節(jié)流函數(shù)

function throttle(func, delay){
  let timer = null;
  let startTime = Date.now();

  return function(){
    let curTime = Date.now();
    let remaining = delay - (curTime - startTime);
    const context = this;
    const args = arguments;

    clearTimeout(timer);
    if(remaining <= 0){
      func.apply(context,args);
      startTime = Date.now();
    }else{
      timer = setTimeout(func, remaining);
    }
  }
}
需要在每個delay時間中一定會執(zhí)行一次函數(shù)，因此在節(jié)流函數(shù)內(nèi)部使用開始時間、當前時間與delay來計算remaining，當remaining <= 0時表示該執(zhí)行函數(shù)了，如果還沒到時間的話就設(shè)定在remaining時間后再觸發(fā)。當然在remaining這段時間中如果又一次發(fā)生事件，那么會取消當前的計時器，并重新計算一個remaining來判斷當前狀態(tài)。

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

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

相關(guān)文章

  • 詳談js防抖和節(jié)流

    摘要：本文會分別介紹什么是防抖和節(jié)流，它們的應(yīng)用場景，和實現(xiàn)方式。防抖和節(jié)流都是為了解決短時間內(nèi)大量觸發(fā)某函數(shù)而導(dǎo)致的性能問題，比如觸發(fā)頻率過高導(dǎo)致的響應(yīng)速度跟不上觸發(fā)頻率，出現(xiàn)延遲，假死或卡頓的現(xiàn)象。 本文由小芭樂發(fā)表 0. 引入 首先舉一個例子： 模擬在輸入框輸入后做ajax查詢請求，沒有加入防抖和節(jié)流的效果，這里附上完整可執(zhí)行代碼： 沒有防抖 ...

    shevy 評論0 收藏0

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

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

    Mr_houzi 評論0 收藏0

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

    摘要：應(yīng)用場景給按鈕加函數(shù)防抖防止表單多次提交。對于輸入框連續(xù)輸入進行驗證時，用函數(shù)防抖能有效減少請求次數(shù)。參考十分鐘學(xué)會防抖和節(jié)流輕松理解函數(shù)節(jié)流和函數(shù)防抖 函數(shù)防抖和節(jié)流 防抖 對于觸發(fā)非常頻繁又沒有必要每次都執(zhí)行的事件，希望合并到一次去執(zhí)行； 實現(xiàn)思路： 事件觸發(fā)后，在規(guī)定的時間范圍內(nèi)如果事件重復(fù)觸發(fā)，那么忽略之前觸發(fā)的事件，并且重新開始計時，直到某一次事件觸發(fā)后大于規(guī)定時間，我們才執(zhí)...

    daydream 評論0 收藏0

  • 淺談js防抖和節(jié)流

    摘要：防抖和節(jié)流嚴格算起來應(yīng)該屬于性能優(yōu)化的知識，但實際上遇到的頻率相當高，處理不當或者放任不管就容易引起瀏覽器卡死。 防抖和節(jié)流嚴格算起來應(yīng)該屬于性能優(yōu)化的知識，但實際上遇到的頻率相當高，處理不當或者放任不管就容易引起瀏覽器卡死。所以還是很有必要早點掌握的。（信我，你看完肯定就懂了） 從滾動條監(jiān)聽的例子說起 先說一個常見的功能，很多網(wǎng)站會提供這么一個按鈕：用于返回頂部。showImg(ht...

    opengps 評論0 收藏0

  • JavaScript防抖和節(jié)流

    摘要：概念函數(shù)防抖和函數(shù)節(jié)流，兩者都是優(yōu)化高頻率執(zhí)行代碼的一種手段。防抖任務(wù)頻繁觸發(fā)的情況下，只有任務(wù)觸發(fā)的間隔超過指定間隔的時候，任務(wù)才會執(zhí)行。節(jié)流指定時間間隔內(nèi)只會執(zhí)行一次任務(wù)一定時間內(nèi)方法只跑一次。 概念 函數(shù)防抖和函數(shù)節(jié)流，兩者都是優(yōu)化高頻率執(zhí)行js代碼的一種手段。 防抖：任務(wù)頻繁觸發(fā)的情況下，只有任務(wù)觸發(fā)的間隔超過指定間隔的時候，任務(wù)才會執(zhí)行。 節(jié)流：指定時間間隔內(nèi)只會執(zhí)行一次任...

    DevWiki 評論0 收藏0

發(fā)表評論

0條評論

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