應(yīng)用場景：input的onchange/oninput,鼠標(biāo)mousein，mouseout，鼠標(biāo)的scroll等高頻事件，觸發(fā)函數(shù)fn，此時(shí)我們用節(jié)流throttle方法和debounce方法對(duì)函數(shù)fn做一層處理：
1.節(jié)流 throttle：
事件在n 秒內(nèi)，只執(zhí)行一次：
代碼示例：
let throttl=（fn,n）=>{
let timer;
return function(){
let self = this,args = arguments;
if(timer) return
timer = setTimeout(function(){
fn.apply(self,args)
timer = null;
},n)
}
}
代碼解釋：
事件第一次觸發(fā)，執(zhí)行throttl函數(shù)，賦值timer延時(shí)器，并在n 毫秒之后執(zhí)行，
當(dāng)?shù)诙斡|發(fā)執(zhí)行throttl時(shí)間間隔距離第一次次事件大于n毫秒，此時(shí)第一次的延時(shí)fn已執(zhí)行，第二次的fn照常n毫秒后執(zhí)行
如果第二次觸發(fā)執(zhí)行throttl時(shí)間間隔距離第一次次事件小于n毫秒，此時(shí)timer在function函數(shù)內(nèi)，已經(jīng)聲明，直接return出去，不會(huì)執(zhí)行延時(shí)器，
注意，延時(shí)器執(zhí)行完成之后，timer要重新賦值null。
2.防抖 debounce：
在事件被觸發(fā)n秒后再執(zhí)行回調(diào)，如果在這n秒內(nèi)又被觸發(fā)不會(huì)執(zhí)行fn，則重新計(jì)時(shí)。
一個(gè)比較生動(dòng)的例子：防抖函數(shù)就就像，法師發(fā)技能的時(shí)候要讀條，技能讀條沒完再按技能就會(huì)重新讀條。
代碼示例：
let debounce = （fn,n）=>{
let timer;
return function(){
let self = this, args = arguments;
if(timer) clearTimeout(timer);
timer = setTimeout(function(){
fn.apply(self,args)
},n)
}
}
代碼解釋：
事件第一次觸發(fā)，執(zhí)行debounce 函數(shù)，賦值timer延時(shí)器，并在n 毫秒之后執(zhí)行，
當(dāng)?shù)诙斡|發(fā)執(zhí)行debounce 時(shí)間間隔距離第一次次事件大于n毫秒，此時(shí)第一次的延時(shí)fn已執(zhí)行，第二次的fn照常n毫秒后執(zhí)行
如果第二次觸發(fā)執(zhí)行debounce 時(shí)間間隔距離第一次次事件小于n毫秒，此時(shí)timer在function函數(shù)內(nèi)，已經(jīng)聲明，此時(shí)清除第一次聲明的timer，并且再次聲明一個(gè)新的timer，并在n毫秒之后再執(zhí)行，
總結(jié)：throttle節(jié)流，一定時(shí)間里只執(zhí)行一次，多次觸發(fā)也只執(zhí)行一次，注意代碼里面的return；
debounce防抖，事件被觸發(fā)n秒后再執(zhí)行回調(diào)，如果在這n秒內(nèi)又被觸發(fā)不會(huì)執(zhí)行fn，則重新計(jì)時(shí)。（法師發(fā)技能的時(shí)候要讀條，技能讀條沒完再按技能就會(huì)重新讀條，法師的技能只釋放了一次），兩者區(qū)別的關(guān)鍵代碼（個(gè)人理解），throttle是直接return出去，debounce是重新賦值timer后再執(zhí)行。
本文只是節(jié)流和防抖的一種入門的寫法，有興趣的同學(xué)可以移步掘金或者思否更深入了解
