瀏覽器中某些計(jì)算和處理要比其他的昂貴的多。例如，DOM操作比起非DOM交互需要更多的內(nèi)存和CPU時(shí)間。連續(xù)嘗試進(jìn)行過多的DOM相關(guān)操作可能會(huì)導(dǎo)致 瀏覽器掛起，有時(shí)候甚至?xí)罎?。尤其在IE中使用onresize事件處理程序的時(shí)候容易發(fā)生，當(dāng)調(diào)整瀏覽器大小的時(shí)候，該事件連續(xù)觸發(fā)。在 onresize事件處理程序內(nèi)部如果嘗試進(jìn)行DOM操作，其高頻率的更改可能會(huì)讓瀏覽器崩潰。

     函數(shù)節(jié)流背后的基本思想是，某些代碼不可以在沒有間斷的情況連續(xù)重復(fù)執(zhí)行。第一次調(diào)用函數(shù)，創(chuàng)建一個(gè)定時(shí)器，在指定的時(shí)間間隔之后運(yùn)行代碼。當(dāng)?shù)诙握{(diào)用 該函數(shù)時(shí)，它會(huì)清除前一次的定時(shí)器并設(shè)置另一個(gè)。如果前一個(gè)定時(shí)器已經(jīng)執(zhí)行過了，這個(gè)操作就沒有任何意義。然而，如果前一個(gè)定時(shí)器尚未執(zhí)行，其實(shí)就是將其 替換為一個(gè)新的定時(shí)器。目的是只有在執(zhí)行函數(shù)的請求停止了一段時(shí)間之后才執(zhí)行。

 function throttle ( method , context ){
        clearTimeout ( method.tId );
        method.tId = setTimeout ( function () {
           method.call ( context );
         } , 100);
     }

應(yīng)用舉例:
     假設(shè)有一個(gè)<div/>元素需要保持它的高度始終等同于寬度，可作如下編碼:

 function resizeDiv(){
        var div = document.getElementById("mydiv");
        div.style.height = div.offsetWidth + "px";
      }
      window.onresize = function(){
        throttle(resizeDiv);
      }

這里，調(diào)整大小的功能被放入了一個(gè)叫做resizeDiv的單獨(dú)函數(shù)中，然后onresize事件處理程序調(diào)用throttle()并傳入 resizeDiv函數(shù)，而不是直接調(diào)用resizeDiv()。多數(shù)情況下，用戶是感覺不到變化的，雖然給瀏覽器節(jié)省的計(jì)算可能非常大。

下面是其他網(wǎng)友的補(bǔ)充

今天主要寫寫我們平時(shí)工作中需要的函數(shù)節(jié)流?？赡苡械呐笥褜瘮?shù)節(jié)流沒有意識(shí)。其實(shí)，在工作中，很多場景都需要我們進(jìn)行js的節(jié)流。最常見的是屏幕伸縮resize，以及touchmove或者scroll等事件的時(shí)候。大家不知道有沒有看我之前寫的文章！jquery判斷頁面滾動(dòng)條上滾下滾，touchmove的滑動(dòng)方向，大家在使用這些例子的時(shí)候，會(huì)發(fā)現(xiàn)頁面不停的觸發(fā)touchmove或者scroll因?yàn)檫@里沒有關(guān)系到頁面的重繪，因此，我在這里沒有使用javascript函數(shù)節(jié)流。但是，當(dāng)我們使用window.onresize的時(shí)候，也會(huì)不停的觸發(fā)resize事件！這里就會(huì)關(guān)系到頁面的重新繪制問題了。因此，在window的resize的時(shí)候，我們推薦大家使用函數(shù)節(jié)流的方式！

javascript函數(shù)節(jié)流簡介
假如你對我上面一大坨文字感到頭大，沒關(guān)系，我在這里簡單舉例說明一下函數(shù)節(jié)流吧！例如當(dāng)我們使用

 $(window).resize(function(){
      console.log("haorooms window resize");
    })

會(huì)發(fā)現(xiàn)：

這里會(huì)輸出好多次。我們簡單的縮小一下窗口，就會(huì)不停的觸發(fā)！

這樣在div很多的時(shí)候，頁面不停重繪，要是遇到版本比較低的IE等，很可能會(huì)出現(xiàn)瀏覽器崩潰的現(xiàn)象！為了避免這種情況，我們可以用函數(shù)節(jié)流的方式?；镜乃枷胧牵旱谝淮握{(diào)用函數(shù)的時(shí)候，我們創(chuàng)建一個(gè)定時(shí)器，在指定時(shí)間間隔之后運(yùn)行代碼，第二次調(diào)用的時(shí)候，會(huì)清楚前一個(gè)定時(shí)器，并重新設(shè)置一個(gè)。如果前一個(gè)定時(shí)器已經(jīng)執(zhí)行過了，那么這個(gè)操作就沒有有意了，如果定時(shí)器尚未執(zhí)行，就會(huì)將其替換為一個(gè)新的定時(shí)器。目的是在執(zhí)行函數(shù)停止了一段時(shí)間之后再執(zhí)行。

用對象的方式可以如下寫：

var haoroomstest={
      timeoutId:null,
      performProcessing:function(){        
          console.log("resize");      

      },
      process:function(){
        clearTimeout(this.timeoutId);
        var that=this;
        this.timeoutId=setTimeout(function(){
          that.performProcessing();
        },500)
      }
    }

這樣之后，我們再用：

$(window).resize(function(){ haoroomstest.process(); })

這樣就會(huì)減少請求，減少dom重繪，達(dá)到節(jié)流的目的！

函數(shù)節(jié)流其他方式
除了我們運(yùn)用對象的方式，網(wǎng)上及資料中也介紹了關(guān)于函數(shù)節(jié)流的其他方法和方式，我下面簡單介紹幾種！

函數(shù)方式一

function throttle(method,context){
      clearTimeout(method.tId);
      method.tId=setTimeout(function(){
        method.call(context);
      },100);
    }

我們?nèi)缦率褂?/p>

function resizeDIv(){
      console.log("haorooms")
    }

    $(window).resize(function(){
      throttle(resizeDIv)
    })

和上面對象實(shí)現(xiàn)了同樣的效果！

函數(shù)方式二

網(wǎng)上還有一種比較流行的節(jié)流方式，我在這里寫一下！

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

然后可以這么寫：

function resizeDIv(){
      console.log("haorooms")
    }

   window.onresize=throttle(resizeDIv,500);

新需求

我們在做模糊搜索智能聯(lián)想提示的時(shí)候，會(huì)在input上面綁定keyup事件。但是我又不想觸發(fā)的那么頻繁，用上面的方式就會(huì)有問題。因此，在上面的函數(shù)基礎(chǔ)上稍加改動(dòng)，如下：

function throttle(method,delay,duration){
      var timer=null, begin=new Date();
      return function(){
        var context=this, args=arguments, current=new Date();;
        clearTimeout(timer);
        if(current-begin>=duration){
           method.apply(context,args);
           begin=current;
        }else{
          timer=setTimeout(function(){
            method.apply(context,args);
          },delay);
        }
      }
}

這樣觸發(fā)就不會(huì)有之前那么頻繁了！

最新評(píng)論