防抖和節(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
}
}
}
