js 函數節流 與 防抖動

函數節流：就如同成都搖號買房，前一個進去選房了，下一個就要等一段時間。這種策略就很好的解決了，一大波人進去選房，銷售妹妹沒發接待的尷尬局面。

應用場景：監聽瀏覽器滾動條，而後觸發函數。

 

// 普通作法
document.getElementById("throttle").onscroll = function(){
    //監聽到滾動就直接觸發，不停滾動就不停觸發
    callback();
    
};

// 函數節流
var canRun = true;
document.getElementById("throttle").onscroll = function(){
    //經過設置鎖，一段時間只讓一個妹紙進來，多了應付不了，你懂得：）
    if(!canRun){
        return;
    }

    canRun = false;
    setTimeout(function(){
        console.log("函數節流");
        canRun = true;
    }, 300);
};

　　

　　

函數防抖動： 就如同選妹子，來了一隊列妹子讓你選，你只選最後一個，由於前面的太醜了。

應用場景： input 設置了onChange 事件，一旦有改動，就會觸發change事件，不停改動，就不停觸發。其實，咱們只須要最後輸入的值。

 

// 函數防抖 
var timer = false; 
document.getElementById("input").onchange = function(){ 
　　clearTimeout(timer); // 清除未執行的代碼，重置回初始化狀態 
　　timer = setTimeout(function(){ 
　　　　console.log("函數防抖"); 
　　}, 300); 
};