函式防抖

　　在對於函式高頻次執行時，只執行一次。

　　有兩種情況：

　　　　1.尾部執行：高頻次觸發時，只執行最後一次

　　　　2.頭部執行：高頻次觸發時，只執行第一次

尾部執行實現很簡單，先設一個定時器，一開始觸發的時候我不執行，稍微延遲一會後再執行，當你下次執行時，我把上一次的定時器消失，這樣就只會執行最後一次了。

 //防抖尾部執行    
 let nub = 0;
 let timer = 0;   
 box.onmousemove = function(){
     clearTimeout(timer);
     timer = setTimeout(()=>{
         console.log(1);
     },200);
}  

頭部執行會複雜一些，這裡我們多新增一個變數賦值為true，首先先判斷這個變數是否為true；true的話就把事件執行了，執行完後把這個變數設為false。然後在定時器結束後，再把變數設為true。

// 防抖頭部執行
let nub = 0;
let timer = 0;  
let isStart = true; 
box.onmousemove = function(){
    if(isStart){
        console.log(1);
        isStart = false;
    }
    clearTimeout(timer);
    timer = setTimeout(()=>{
        isStart = true;
    },200);
} 

函式節流

　　函式節流，把執行間隔拉大。

　　  與函式防抖一樣有頭部與尾部執行之分

尾部執行：一樣呼叫定時器，首先判斷定時器是否開始，如果開啟了就不往下執行，定時器沒有開啟再往下執行，執行完後，把定時器歸回0

// 尾部執行
 let timer = 0;
 box.onmousemove = function(){
     if(timer){
         return ;
     }
     timer = setTimeout(()=>{
         console.log(0);
         timer = 0;
     },1000);
 } 

頭部執行：就是在開啟定時器之前執行，定時器決定的是下次再執行的時候。

// 頭部執行
let timer = 0;
box.onmousemove = function(){
    if(timer){
        return ;
    }
    console.log(0);
    timer = setTimeout(()=>{
        timer = 0;
    },1000);
} 

明天將對上面的內容進行封裝，封裝後就可以開箱即用