首頁  >  文章  >  web前端  >  JS函數節流防手震實例詳解

JS函數節流防手震實例詳解

小云云
小云云原創
2018-01-09 15:08:362199瀏覽

本文主要介紹了JS函數節流防手震,函數節流和函數防手震為了解決類似需求應運而生的,有興趣的可以了解一下,希望能幫助大家。

在前端開發有一部分的使用者行為會頻繁的觸發事件執行,而對於DOM操作、資源載入等耗費效能的處理,很可能會導致介面卡頓,甚至是瀏覽器的崩潰。函數節流(throttle)和函數防手震(debounce)就是為了解決類似需求應運而生的。

函數節流(throttle)

函數節流就是預定函數只有在大於等於執行週期時才執行,週期內呼叫不執行。好像水滴攢到一定重量才會落下一樣。

場景:

  • 視窗調整(resize)

  • #頁面捲動(scroll)

  • 搶購瘋狂點擊(mousedown)

實作:


function throttle(method, delay){
  var last = 0;
  return function (){
    var now = +new Date();
    if(now - last > delay){
      method.apply(this,arguments);
      last = now;
    }
  }
}

document.getElementById('throttle').onclick = throttle(function(){console.log('click')},2000);

underscore實作:



  • ##

    _.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;
        //剩余时间小于等于0或者剩余时间大于等待时间(本地时间变动出现)
        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;
      };
    };

  • 函數防手震(debounce)
  • 函數防手震就是在函數需要頻繁觸發情況時,只有足夠空閒的時間,才執行一次。好像公車司機會等人都上車後才出站一樣。

場景:


即時搜尋(keyup)


拖曳(mousemove)


實作:

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

document.getElementById(&#39;debounce&#39;).onclick = debounce(function(){console.log(&#39;click&#39;)},2000);
underscore實作:

_.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;
  };
};

函數節流(throttle)與函式防抖(debounce)都是透過延時邏輯操作來提升效能的方法,在前端優化中是常見且重要的解決方式。可以從概念和實際應用中理解兩者的區別,在需要的時候選擇合適的方法處理。

相關推薦:

######詳解javascript函數的節流與防手震############詳細分析JS函數去抖與節流_基礎知識############函數節流與防手震的意義#######

以上是JS函數節流防手震實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn