在上周的開發(fā)中预鬓，又遇到點(diǎn)擊保存多次請(qǐng)求數(shù)據(jù)重復(fù)的問題濒募，所以下來學(xué)習(xí)了一下js的防抖和節(jié)流鞭盟。
通過學(xué)習(xí)了解到，在進(jìn)行窗口的resize瑰剃、scroll齿诉，輸入框內(nèi)容校驗(yàn)等操作時(shí)，如果事件處理函數(shù)調(diào)用的頻率無限制晌姚，會(huì)加重瀏覽器的負(fù)擔(dān)粤剧，會(huì)導(dǎo)致數(shù)據(jù)重復(fù)等一系列問題。此時(shí)我們可以采用debounce（防抖）和throttle（節(jié)流）的方式來減少調(diào)用頻率挥唠，同時(shí)又不影響實(shí)際效果抵恋。

函數(shù)防抖（debounce）

當(dāng)持續(xù)觸發(fā)事件時(shí)，一定時(shí)間段內(nèi)沒有再觸發(fā)事件宝磨，事件處理函數(shù)才會(huì)執(zhí)行一次弧关，如果設(shè)定的時(shí)間到來之前，又一次觸發(fā)了事件唤锉，就重新開始延時(shí)世囊。
簡單防抖的實(shí)現(xiàn)：

// 防抖
function debounce(fn, wait) {    
    var timeout = null;    
    return function() {        
        if(timeout !== null)   clearTimeout(timeout);        
        timeout = setTimeout(fn, wait);    
    }
}
// 處理函數(shù)
function handle() {    
    console.log(Math.random()); 
}
// 滾動(dòng)事件
window.addEventListener('scroll', debounce(handle, 1000));

當(dāng)持續(xù)觸發(fā)scroll事件時(shí)，事件處理函數(shù)handle只在停止?jié)L動(dòng)1000毫秒之后才會(huì)調(diào)用一次窿祥，也就是說在持續(xù)觸發(fā)scroll事件的過程中株憾，事件處理函數(shù)handle一直沒有執(zhí)行。

函數(shù)節(jié)流（throttle）

當(dāng)持續(xù)觸發(fā)事件時(shí)晒衩，保證一定時(shí)間段內(nèi)只調(diào)用一次事件處理函數(shù)嗤瞎。節(jié)流通俗解釋就比如我們水龍頭放水，閥門一打開浸遗，水嘩嘩的往下流猫胁，秉著勤儉節(jié)約的優(yōu)良傳統(tǒng)美德，我們要把水龍頭關(guān)小點(diǎn)跛锌，最好是如我們心意按照一定規(guī)律在某個(gè)時(shí)間間隔內(nèi)一滴一滴的往下滴弃秆。
函數(shù)節(jié)流主要有兩種實(shí)現(xiàn)方法：時(shí)間戳和定時(shí)器届惋。接下來分別用兩種方法實(shí)現(xiàn)throttle：

節(jié)流throttle代碼（時(shí)間戳）：

var throttle = function(func, delay) {            
　　var prev = Date.now();            
　　return function() {                
　　　　var context = this;                
　　　　var args = arguments;                
　　　　var now = Date.now();                
　　　　if (now - prev >= delay) {                    
　　　　　　func.apply(context, args);                    
　　　　　　prev = Date.now();                
　　　　}            
　　}        
}        
function handle() {            
　　console.log(Math.random());        
}        
window.addEventListener('scroll', throttle(handle, 1000));

當(dāng)高頻事件觸發(fā)時(shí)，第一次會(huì)立即執(zhí)行（給scroll事件綁定函數(shù)與真正觸發(fā)事件的間隔一般大于delay）菠赚，而后再怎么頻繁地觸發(fā)事件脑豹，也都是每delay時(shí)間才執(zhí)行一次。而當(dāng)最后一次事件觸發(fā)完畢后衡查，事件也不會(huì)再被執(zhí)行了 瘩欺。

節(jié)流throttle代碼（定時(shí)器）：

var throttle = function(func, delay) {            
    var timer = null;            
    return function() {                
        var context = this;               
        var args = arguments;                
        if (!timer) {                    
            timer = setTimeout(function() {                        
                func.apply(context, args);                        
                timer = null;                    
            }, delay);                
        }            
    }        
}        
function handle() {            
    console.log(Math.random());        
}        
window.addEventListener('scroll', throttle(handle, 1000));

當(dāng)觸發(fā)事件的時(shí)候，我們?cè)O(shè)置一個(gè)定時(shí)器拌牲，再次觸發(fā)事件的時(shí)候俱饿，如果定時(shí)器存在，就不執(zhí)行塌忽，直到delay時(shí)間后拍埠，定時(shí)器執(zhí)行執(zhí)行函數(shù)，并且清空定時(shí)器土居，這樣就可以設(shè)置下個(gè)定時(shí)器枣购。當(dāng)?shù)谝淮斡|發(fā)事件時(shí)，不會(huì)立即執(zhí)行函數(shù)擦耀，而是在delay秒后才執(zhí)行棉圈。而后再怎么頻繁觸發(fā)事件，也都是每delay時(shí)間才執(zhí)行一次眷蜓。當(dāng)最后一次停止觸發(fā)后分瘾，由于定時(shí)器的delay延遲，可能還會(huì)執(zhí)行一次函數(shù)账磺。

節(jié)流中用時(shí)間戳或定時(shí)器都是可以的芹敌。更精確地，可以用時(shí)間戳+定時(shí)器垮抗，當(dāng)?shù)谝淮斡|發(fā)事件時(shí)馬上執(zhí)行事件處理函數(shù)氏捞，最后一次觸發(fā)事件后也還會(huì)執(zhí)行一次事件處理函數(shù)。

節(jié)流throttle代碼（時(shí)間戳+定時(shí)器）：

var throttle = function(func, delay) {     
    var timer = null;     
    var startTime = Date.now();     
    return function() {             
        var curTime = Date.now();             
        var remaining = delay - (curTime - startTime);             
        var context = this;             
        var args = arguments;             
        clearTimeout(timer);              
        if (remaining <= 0) {                    
            func.apply(context, args);                    
            startTime = Date.now();              
        } else {                    
            timer = setTimeout(func, remaining);              
        }      
    }
}
function handle() {      
    console.log(Math.random());
} 
window.addEventListener('scroll', throttle(handle, 1000));

在節(jié)流函數(shù)內(nèi)部使用開始時(shí)間startTime冒版、當(dāng)前時(shí)間curTime與delay來計(jì)算剩余時(shí)間remaining液茎，當(dāng)remaining<=0時(shí)表示該執(zhí)行事件處理函數(shù)了（保證了第一次觸發(fā)事件就能立即執(zhí)行事件處理函數(shù)和每隔delay時(shí)間執(zhí)行一次事件處理函數(shù)）。如果還沒到時(shí)間的話就設(shè)定在remaining時(shí)間后再觸發(fā) （保證了最后一次觸發(fā)事件后還能再執(zhí)行一次事件處理函數(shù)）辞嗡。當(dāng)然在remaining這段時(shí)間中如果又一次觸發(fā)事件捆等，那么會(huì)取消當(dāng)前的計(jì)時(shí)器，并重新計(jì)算一個(gè)remaining來判斷當(dāng)前狀態(tài)续室。

總結(jié)

函數(shù)防抖：將幾次操作合并為一此操作進(jìn)行栋烤。原理是維護(hù)一個(gè)計(jì)時(shí)器，規(guī)定在delay時(shí)間后觸發(fā)函數(shù)挺狰，但是在delay時(shí)間內(nèi)再次觸發(fā)的話明郭，就會(huì)取消之前的計(jì)時(shí)器而重新設(shè)置肺稀。這樣一來彤悔，只有最后一次操作能被觸發(fā)汇恤。

函數(shù)節(jié)流：使得一定時(shí)間內(nèi)只觸發(fā)一次函數(shù)埠帕。原理是通過判斷是否到達(dá)一定時(shí)間來觸發(fā)函數(shù)。

區(qū)別： 函數(shù)節(jié)流不管事件觸發(fā)有多頻繁话侄，都會(huì)保證在規(guī)定時(shí)間內(nèi)一定會(huì)執(zhí)行一次真正的事件處理函數(shù)亏推，而函數(shù)防抖只是在最后一次事件后才觸發(fā)一次函數(shù)。 比如在頁面的無限加載場景下年堆，我們需要用戶在滾動(dòng)頁面時(shí)吞杭，每隔一段時(shí)間發(fā)一次 Ajax 請(qǐng)求，而不是在用戶停下滾動(dòng)頁面操作時(shí)才去請(qǐng)求數(shù)據(jù)变丧。這樣的場景篇亭，就適合用節(jié)流技術(shù)來實(shí)現(xiàn)

當(dāng)然，在了解原理之后锄贷，我們看可以使用lodash-decorators工具的防抖函數(shù)：Debounce
首先下載依賴： npm install lodash-decorators --save
在函數(shù)中使用裝飾器

image.png