防抖和節流

1、概念

1. 防抖
   • 把多個順序的調用合併成一次，也就是在必定的時間內，規定事件被觸發的次數
   • 如何實現

     // 簡單的防抖函數
     function debounce(func, wait){
         var timeout;
         return function() {
             clearTimeout(timeout);      // 清除計時器
             timeout = setTimeout(func, wait);
         };
     };
     
     // 實際想要請求的函數
     function realFun(){
         console.log('success');
     }
     
     // 採用防抖
     window.addEventListener('scroll', debounce(realFun, 500));
     
     // 沒有采用防抖動
     window.addEventListener('scroll', realFunc);

     　　
2. 節流
   • 爲何有了防抖還不知足，出了個節流呢？由於通常咱們往下滑動的時候，不停的觸發scroll事件，若是隻有防抖函數，那麼有可能會出現空白，由於會一直的清空計時器不會發生請求。因此，咱們想要一邊滑動，一邊出現內容，而且不會出現瀏覽器掉幀，這就須要節流的存在了。
   • 什麼是節流？節流與防抖相比，就是保證在必定時間內至少執行一次咱們但願觸發的事件。
   • 實現

     // 節流函數
     function throttle(func, wait, mustRun){
         var timeout, startTime = new Date();
         return function(){
             var context = this;        // 其實這裏的this指的是window
             var curTime = new Date();
             clearTimeout(timeout);
             if(curTime - startTime >= mustRun){
                 func.apply(context);
                 startTime = curTime;
             }else {
                 timeout = setTimeout(func, wait);
             }
         };
     };
     
     // 要出發的事件handler
     function realFunc(){
         console.log('success');
     }
     
     // 採用節流函數
     window.addEventListener('scroll', throttle(realFunc, 500, 1000));