函數防抖與函數節流

做用： 節省瀏覽器CPU資源

函數防抖

　　應用場景：用戶輸入手機號完畢後再進行驗證。

 1 var timer = null;
 2 document.getElementById("phoneNum").addEventListener('keyup', function(){
 3      clearTimeout(timer);
 4      var val = this.value;
 5      timer = setTimeout(function(){
 6          if(val.length !== 11){
 7                alert('手機號格式錯誤！');
 8          }else{
 9                console.log('success !');
10          }
11      }, 1000);
12 });

 

函數節流

　　應用場景：監聽頁面元素滾動事件

 1 var canRun = true;
 2 document.getElementById("throttle").onscroll = function(){
 3     if(!canRun){
 4         // 判斷是否已空閒，若是在執行中，則直接return
 5         return;
 6     }
 7 
 8     canRun = false;
 9     setTimeout(function(){
10         console.log("函數節流");
11         canRun = true;
12     }, 300);
13 };