防抖和節流

窗口的resize、scroll，輸入框內容校驗等操作時，如果這些操作處理函數較為復雜或頁面頻繁重渲染等操作時，如果事件觸發的頻率無限制，會加重瀏覽器的負擔，導致用戶體驗非常糟糕。此時我們可以采用debounce（防抖）和throttle（節流）的方式來減少觸發的頻率，同時又不影響實際效果。

這兩個東西都是為了項目優化而出現的，官方是沒有具體定義的，他們的出現主要是為了解決一些短時間內連續執行的事件帶來性能上的不佳和內存的消耗巨大等問題；

像這類事件一般像 scroll keyup mousemove resize等等，短時間內不斷的觸發，在性能上消耗是非常大的，尤其是一些改變DOM結構的操作；

節流[throttle]與防抖[debounce]非常相似，都是讓上述這類事件在規定的事件從不斷的去觸發更改成為規定的時間內觸發多少次；

節流[throttle]

節流通俗來解釋就比如我們水龍頭放水，閥門一打開，水嘩嘩的往下流，這個秉著勤儉節約的優良傳統美德，我們要把水龍頭關小點，最好是如我們心意按照一定規律在某個時間間隔內一滴一滴的往下滴，這，，，好吧這就是我們節流的概念；

換成函數來說，使用setTimeout方法，給定兩個時間，后面的時間減去前面的時間，到達我們給定的時間就去觸發一次這個事件，這么說太籠統的，我們看下面的函數，這里我們以【scroll】為例；

/** 樣式我就順便寫了 **/<style> *{padding:0;margin:0;} .scroll-box{  width : 100%;  height : 500px;  background:blue;  overflow : auto; }  .scroll-item{  height:1000px;  width:100%; }</style>

------------------------

/** 先給定DOM結構;**/<div class="scroll-box"> <div class="scroll-item"></div></div>

------------------------

/**主要看js,為了簡單我用JQ去寫了**/<script> $(document).ready(function(){  var scrollBox = $('.scroll-box');  //調用throttle函數，傳入相應的方法和規定的時間;  var thro = throttle(throFun,300);  //觸發事件;  scrollBox.on('scroll' , function(){   //調用執行函數;   thro();  })  // 封裝函數;   function throttle(method,time){   var timer = null;   var startTime = new Date();   return function(){    var context = this;    var endTime = new Date();    var resTime = endTime - startTime;    //判斷大于等于我們給的時間采取執行函數;    if(resTime >= time){     method.call(context);     //執行完函數之后重置初始時間，等于最后一次觸發的時間     startTime = endTime;    }   }  }  function throFun(){   console.log('success');  } })</script>

通過以上的函數，我們就可以做到節流的效果，在規定的每300毫秒觸發一次，當然時間可以自定義，根據需求來；