<small id="qooik"></small>

有個叫函數節流的東西

wuyangnju 發布于2019-08-21 10:30 / 1910人閱讀

摘要：為了解決這個問題，我們只能通過減少執行函數的次數來提高響應速度。時間間隔內若再次觸發事件，則重新計時，直到停止時間大于或等于才執行函數。

某些場景下，比如響應鼠標移動或者窗口大小調整的事件，觸發頻率比較高。若處理函數稍微復雜，需要較多的運算執行時間，響應速度跟不上觸發頻率，往往會出現延遲，導致假死或者卡頓感。

為了解決這個問題，我們只能通過減少執行函數的次數來提高響應速度。

throttle 和 debounce 是解決請求和響應速度不匹配問題的兩個方案。二者的差異在于選擇不同的策略。

throttle 等時間間隔執行函數。

debounce 時間間隔 t 內若再次觸發事件，則重新計時，直到停止時間大于或等于 t 才執行函數。

throttle

/**
*
* @param fn {Function}   實際要執行的函數
* @param delay {Number}  執行間隔，單位是毫秒（ms）
*
* @return {Function}     返回一個“節流”函數
*/
function throttle(fn, threshhold) {
  // 記錄上次執行的時間
  var last
  // 定時器
  var timer
  // 默認間隔為 250ms
  threshhold || (threshhold = 250)
  // 返回的函數，每過 threshhold 毫秒就執行一次 fn 函數
  return function () {
    // 保存函數調用時的上下文和參數，傳遞給 fn
    var context = this
    var args = arguments
    var now = +new Date()
    // 如果距離上次執行 fn 函數的時間小于 threshhold，那么就放棄
    // 執行 fn，并重新計時
    if (last && now < last + threshhold) {
      clearTimeout(timer)
      // 保證在當前時間區間結束后，再執行一次 fn
      timer = setTimeout(function () {
        last = now
        fn.apply(context, args)
      }, threshhold)
    // 在時間區間的最開始和到達指定間隔的時候執行一次 fn
    } else {
      last = now
      fn.apply(context, args)
    }
  }
}

調用方法

$("body").on("mousemove", throttle(function (event) {
  console.log("tick");
}, 1000));

debounce

function debounce(fn, delay) {
  var timer = null;
  return function () {
    var context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
}

調用方法

$("input.username").keypress(debounce(function (event) {
  // do the Ajax request
}, 250));

云服務器 GPU云服務器函數節流 js函數節流服務器的東西刪除怎么網購買東西的步驟

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

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

聊聊Tomcat的架構設計

摘要：本篇文章主要是跟大家聊聊的內部架構體系，讓大家對有個整體的認知。方法會創建一個對象，調用它的方法將字節流封裝成對象，在創建組件時，會將組件添加到組件中組件而組件在連接器初始化時就已經創建好了目前為止，只有一個實現類，就是。微信公眾號「后端進階」，專注后端技術分享：Java、Golang、WEB框架、分布式中間件、服務治理等等。老司機傾囊相授，帶你一路進階，來不及解釋了快上車！ T...

cnio 2019-08-16 17:46 評論0 收藏0
來！我們一起來從頭開始構建自己的JavaScript模塊化工具

摘要：能達到一個積木塊模塊的要求。接下來我們將改進它。結尾到此，我們自己構建了一個很實用的模塊化工具，項目的源碼在這里，喜歡的話，給個。前言希望編寫程序能像玩積木一樣，首先規劃要產出怎樣的作品，然后在積木堆中挑選合適的積木塊，最后一組合就完工了。于是JavaScript需要類似這樣模塊化，每個模塊都隱藏內部細節并且對外暴露接口，再處理好模塊之間的依賴關系，就可以達到玩積木的效果了。雖...

AaronYuan 2019-08-19 18:26 評論0 收藏0
Javascript事件代理の真理

摘要：參考資料事件代理很久很久以來，總感覺事件發生與事件代理到之間沒什么鳥區別。要搞清楚什么是事件代理，就需要先搞清楚什么是代理。，怎么從字面來理解事件代理一詞的含義后文有講。于是，看了事件代理的資料。這一過程被稱為事件冒泡。參考資料：js-事件代理很久很久以來，總感覺事件發生與事件代理到之間沒什么鳥區別。最近，又看了一下，感覺區別其實真不大！看怎么理解吧。要搞清楚什么是事件代理，就...

lijy91 2019-08-19 17:32 評論0 收藏0
用Vue開發仿旅游站webapp項目總結（上）

摘要：寫著寫著發現會寫不少內容全部寫在一篇文章里感覺太多了不方便看，所以分為上下篇吧下篇寫完啦，感興趣的朋友可以繼續關注開發仿旅游站項目總結下溫馨提示此文章，僅是做完項目后的個人覺得可以總結下來的操作思路，接觸不久的朋友應該會有收獲。寫著寫著發現會寫不少內容... 全部寫在一篇文章里感覺太多了不方便看，所以分為上下篇吧...下篇寫完啦，感興趣的朋友可以繼續關注 => Vue開發仿旅游站we...

church 2019-08-23 13:11 評論0 收藏0