防抖和節(jié)流的作用都是防止函數(shù)多次調(diào)用。防抖動和節(jié)流本質(zhì)是不一樣的穴肘。防抖動是將多次執(zhí)行變?yōu)樽詈笠淮螆?zhí)行，節(jié)流是將多次執(zhí)行變成每隔一段時間執(zhí)行舔痕。
區(qū)別在于，假設(shè)一個用戶一直觸發(fā)這個函數(shù)豹缀，且每次觸發(fā)函數(shù)的間隔小于wait伯复，防抖的情況下只會調(diào)用一次，而節(jié)流的 情況會每隔一定時間（參數(shù)wait）調(diào)用函數(shù)邢笙。
防抖 觸發(fā)高頻事件后n秒內(nèi)函數(shù)只會執(zhí)行一次啸如，如果n秒內(nèi)高頻事件再次被觸發(fā)，則重新計算時間氮惯。
運用：拍照叮雳、下拉觸底加載下一頁、點擊觸發(fā)的事件中節(jié)流 高頻事件觸發(fā)妇汗，但在n秒內(nèi)只會執(zhí)行一次帘不，所以節(jié)流會稀釋函數(shù)的執(zhí)行頻率
運用：搜索框的查詢
防抖的兩種情況的實現(xiàn)：
- 當(dāng)我們觸發(fā)某個事件的時候，先讓函數(shù)延時了 wait 時間 在執(zhí)行函數(shù)的內(nèi)容杨箭。
1).首先寞焙，定義一個變量，存放定時器，
2).判斷如果定時器存在捣郊，就清除定時器辽狈，第一次調(diào)用setCount函數(shù)定時器是不存在的，所以等待了 wait 時間呛牲，執(zhí)行了一次 fun 函數(shù)刮萌，當(dāng)我們一直調(diào)用setCount函數(shù)時，定時器會一直存在娘扩，期間不會執(zhí)行 fun 函數(shù)着茸，直到我們不調(diào)用setCount函數(shù)，定時器會等待wait時間畜侦，才又執(zhí)行了下一次 fun 函數(shù)...
//先防抖后執(zhí)行
function setCount(fun,wait){
let timeout; //定義一個變量元扔，存放定時器
return function(){
if(timeout) clearTimeout(timeout) //如果定時器存在，就清除定時器旋膳，第一執(zhí)行函數(shù)是不存在的澎语，向下繼續(xù)執(zhí)行
timeout=setTimeout(function() {
fun.apply(this)
}, wait);
}
}
}
- 當(dāng)我們觸發(fā)某個事件的時候，先執(zhí)行一次函數(shù)验懊，再進(jìn)行延時擅羞，思路和第一種方法的思路差不多，中間加了一個判斷义图，當(dāng)定時器不存在時减俏，先執(zhí)行了一次fun方法。
1). 首先碱工，定義一個變量娃承，存放定時器，
2). 判斷如果定時器存在怕篷，就清除定時器历筝，如果不存在就先執(zhí)行一遍方法，第一次觸發(fā)setCount函數(shù)定時器是不存在的廊谓，所以先執(zhí)行了fun方法梳猪，等待了 wait 時間，執(zhí)行了下一次方法蒸痹，期間當(dāng)我們一直觸發(fā)setCount事件時春弥，定時器一直存在，所以中間不會執(zhí)行fun方法叠荠，直到wait時間后再執(zhí)行下一次方法
//輸出在前 防抖在后
function setCount(fun,wait){
let timeout;
return function(){
if(timeout) clearTimeout(timeout)
if(!timeout) fun.apply(this)
timeout=setTimeout(function() {
fun.apply(this)
}, wait);
}
}
節(jié)流實現(xiàn)的兩種方式：
- 通過 setTimeout()匿沛，相當(dāng)于每隔wait時間執(zhí)行一次函數(shù)，每次觸發(fā)setCount函數(shù)的時候 timeout 都是存在的榛鼎，隔wait時間后 設(shè)置 timeout=null俺祠，所以就相當(dāng)于每隔wait時間執(zhí)行一次公给。
function setCount(fun,wait){
let timeout;
return function(){
if(!timeout){
timeout=setTimeout(function(){
fun.apply(this)
timeout=null
},wait)
}
}
- 首先設(shè)置一個初始時間，在返回的函數(shù)中定義一個變量獲取當(dāng)前的時間蜘渣，如果兩個值的差大于等待的時間淌铐，就讓它執(zhí)行 fun 函數(shù)，執(zhí)行完函數(shù)把獲取的當(dāng)前時間的值賦值給初始值蔫缸，這樣就起到了節(jié)流的效果腿准，搜索框的搜索功能用這個方法比較多。
function setCount(fun,wait){
let oldtime=0;
return function(){
let newtime = new Date()
if(newtime-oldtime>wait){
fun.apply(this)
oldtime=newtime
}
}
}
