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

資訊專欄INFORMATION COLUMN

函數防抖與節流

Mr_zhang / 1835人閱讀

摘要：函數防抖就是讓某個函數在上一次執行后，滿足等待某個時間內不再觸發此函數后再執行，而在這個等待時間內再次觸發此函數，等待時間會重新計算。

underscore.js提供了很多很有用的函數，今天想說說其中的兩個。這兩個函數都用于限制函數的執行。

debounce

在解釋這個函數前，我們先從一個例子看下這個函數的使用場景。假設我們網站有個搜索框，用戶輸入文本我們會自動聯想匹配出一些結果供用戶選擇。我們可能首先想到的做法就是監聽keypress事件，然后異步去查詢結果。這個方法本身是沒錯的，但是如果用戶快速的輸入了一連串的字符，假設是10個字符，那么就會在瞬間觸發了10次的請求，這無疑不是我們想要的。我們想要的是用戶停止輸入的時候才去觸發查詢的請求，這時候函數防抖可以幫到我們。

函數防抖就是讓某個函數在上一次執行后，滿足等待某個時間內不再觸發此函數后再執行，而在這個等待時間內再次觸發此函數，等待時間會重新計算。

我們先看下underscore.js里相關函數的定義：

  
_.debounce(function, wait, [immediate])


javascript// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
_.debounce = function(func, wait, immediate) {
  var timeout, args, context, timestamp, result;

  var later = function() {
    var last = _.now() - timestamp;

    if (last < wait && last >= 0) {
      timeout = setTimeout(later, wait - last);
    } else {
      timeout = null;
      if (!immediate) {
        result = func.apply(context, args);
        if (!timeout) context = args = null;
      }
    }
  };

  return function() {
    context = this;
    args = arguments;
    timestamp = _.now();
    var callNow = immediate && !timeout;
    if (!timeout) timeout = setTimeout(later, wait);
    if (callNow) {
      result = func.apply(context, args);
      context = args = null;
    }

    return result;
  };
};

參數function是需要進行函數防抖的函數；參數wait則是需要等待的時間，單位為毫秒；immediate參數如果為true，則debounce函數會在調用時立刻執行一次function，而不需要等到wait這個時間后，例如防止點擊提交按鈕時的多次點擊就可以使用這個參數。

所以，上面那個場景，我們可以這么解決：

javascriptfunction query() { 
  //進行異步調用查詢 
}

var lazyQuery = _.debounce(query, 300);
$("#search").keypress(lazyQuery);
throttle

我們網站經常會有這樣的需求，就是滾動瀏覽器滾動條的時候，更新頁面上的某些布局內容或者去調用后臺的某接口查詢內容。同樣的，如果不對函數調用的頻率加以限制的話，那么可能我們滾動一次滾動條就會產生N次的調用了。但是這次的情況跟上面的有所不同，我們不是要在每完成等待某個時間后去執行某函數，而是要每間隔某個時間去執行某函數，避免函數的過多執行，這個方式就叫函數節流。

同樣的，我們看下underscore.js里相關函數的定義：

  
_.throttle(function, wait, [options])


javascript// Returns a function, that, when invoked, will only be triggered at most once
// during a given window of time. Normally, the throttled function will run
// as much as it can, without ever going more than once per `wait` duration;
// but if you"d like to disable the execution on the leading edge, pass
// `{leading: false}`. To disable execution on the trailing edge, ditto.
_.throttle = function(func, wait, options) {
  var context, args, result;
  var timeout = null;
  var previous = 0;
  if (!options) options = {};
  var later = function() {
    previous = options.leading === false ? 0 : _.now();
    timeout = null;
    result = func.apply(context, args);
    if (!timeout) context = args = null;
  };
  return function() {
    var now = _.now();
    if (!previous && options.leading === false) previous = now;
    var remaining = wait - (now - previous);
    context = this;
    args = arguments;
    if (remaining <= 0 || remaining > wait) {
      if (timeout) {
        clearTimeout(timeout);
        timeout = null;
      }
      previous = now;
      result = func.apply(context, args);
      if (!timeout) context = args = null;
    } else if (!timeout && options.trailing !== false) {
      timeout = setTimeout(later, remaining);
    }
    return result;
  };
};

參數function是需要進行函數節流的函數；參數wait則是函數執行的時間間隔，單位是毫秒。option有兩個選項，throttle第一次調用時默認會立刻執行一次function，如果傳入{leading: false}，則第一次調用時不執行function。{trailing: false}參數則表示禁止最后那一次延遲的調用。具體可以看源碼進行理解。

所以，在滾動滾動條的場景，我們可以這么做：

javascriptfunction handleScroll() { 
  //進行滾動時的相關處理 
}

var throttled = _.throttle(handleScroll, 100);
$(window).scroll(throttled);
參考

http://underscorejs.org/#debounce
http://underscorejs.org/#throttle

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

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

相關文章

  • 小菊花課堂之JS的防抖與節流

    摘要：文章來源詳談防抖和節流輕松理解函數節流和函數防抖函數防抖和節流好啦，今天的小菊花課堂之的防抖與節流的內容就告一段落啦，感各位能耐心看到這里。 前言 陸游有一首《冬夜讀書示子聿》——古人學問無遺力，少壯工夫老始成。紙上得來終覺淺，絕知此事要躬行。，其中的意思想必大家都能明白，在學習或工作中，不斷的印證著這首詩的內涵。所以，又有了此篇小菊花文章。 詳解 在前端開發中，我們經常會碰到一些會持...

    leoperfect 評論0 收藏0

  • 小菊花課堂之JS的防抖與節流

    摘要：文章來源詳談防抖和節流輕松理解函數節流和函數防抖函數防抖和節流好啦，今天的小菊花課堂之的防抖與節流的內容就告一段落啦，感各位能耐心看到這里。 前言 陸游有一首《冬夜讀書示子聿》——古人學問無遺力，少壯工夫老始成。紙上得來終覺淺，絕知此事要躬行。，其中的意思想必大家都能明白，在學習或工作中，不斷的印證著這首詩的內涵。所以，又有了此篇小菊花文章。 詳解 在前端開發中，我們經常會碰到一些會持...

    Yangder 評論0 收藏0

  • JavaScript：函數防抖與函數節流

    摘要：函數防抖簡單實現模擬請求獲取函數的作用域和變量清除定時器節流名詞解釋連續執行函數，每隔一定時間執行函數。效果函數防抖是某一段時間內只執行一次函數節流是間隔時間執行，不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函數。 防抖（debounce） 名詞解釋：在事件被觸發n秒后再執行回調函數，如果在這n秒內又被觸發，則重新計時。 使用場景：以百度輸入框例，比如你要查詢...

    elina 評論0 收藏0

  • 高級函數技巧-函數防抖與節流

    摘要：封裝方法也比較簡單，書中對此問題也進行了處理使用定時器，讓函數延遲秒后執行，在此秒內，然后函數再次被調用，則刪除上次的定時器，取消上次調用的隊列任務，重新設置定時器。 在實際開發中，函數一定是最實用最頻繁的一部分，無論是以函數為核心的函數式編程，還是更多人選擇的面向對象式的編程，都會有函數的身影，所以對函數進行深入的研究是非常有必要的。 函數節流 比較直白的說，函數節流就是強制規定一...

    whinc 評論0 收藏0

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

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

    _Zhao 評論0 收藏0

  • 防抖與節流（源碼學習）

    摘要：防抖與節流源碼學習最近自己擼了一個輪播圖，在點擊切換的時候，為了尋求更好的用戶體驗，引入了節流，在此記錄對源碼的學習過程源碼來源防抖函數防抖使用場景現在我們需要做一個搜索框，當用戶輸入文字，執行事件的時候，需要發出異步請求去進行結果查詢。 防抖與節流（源碼學習） 最近自己擼了一個輪播圖，在點擊切換的時候，為了尋求更好的用戶體驗，引入了節流，在此記錄對源碼的學習過程源碼來源：unders...

    instein 評論0 收藏0

發表評論

0條評論

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