有點(diǎn)啰嗦坑资，要源碼直接拉倒最后就行啦
什么是防抖？校仑？
觸發(fā)高頻事件后n秒內(nèi)函數(shù)只會(huì)執(zhí)行一次么夫，如果n秒內(nèi)高頻事件再次被觸發(fā)，則重新計(jì)算時(shí)間肤视；
舉個(gè)最常見(jiàn)的例子，就是輸入框的聯(lián)想
我們?cè)谳斎胨阉麝P(guān)鍵詞的時(shí)候邢滑，下面就會(huì)立刻聯(lián)想出其他的關(guān)鍵詞，它的實(shí)現(xiàn)無(wú)非就是通過(guò)監(jiān)控文本框的變化愿汰，每次輸入框發(fā)生變化就會(huì)重新請(qǐng)求聯(lián)想出來(lái)的關(guān)鍵詞再渲染到頁(yè)面中
而input事件在監(jiān)控輸入框的變化時(shí)困后，哪怕一個(gè)字母或者輸一個(gè)拼音時(shí)它都會(huì)監(jiān)控到并執(zhí)行input對(duì)應(yīng)的回調(diào)函數(shù)，向后端發(fā)送數(shù)據(jù)請(qǐng)求聯(lián)想的關(guān)鍵詞衬廷。
所以這就有些浪費(fèi)性能了摇予，防抖函數(shù)的作用就是在input變化時(shí)延遲回調(diào)函數(shù)的執(zhí)行，我的例子都是圍繞這個(gè)例子來(lái)說(shuō)的
實(shí)現(xiàn)防抖函數(shù)
- 準(zhǔn)備
創(chuàng)建debounce.js文件吗跋，
結(jié)合上面的介紹應(yīng)該知道了防抖是延遲事件監(jiān)聽(tīng)的回調(diào)函數(shù)執(zhí)行侧戴，那么防抖函數(shù)至少有兩個(gè)參數(shù)：要延遲的回調(diào)和延遲多久執(zhí)行
/*
* fn: 回調(diào)函數(shù)
* delay：延遲執(zhí)行時(shí)間
*/
function debounce(fn, delay){
}
那么在使用的時(shí)候
input.addEventListener('input', debounce(fn, delay))
這樣是不行的，addEventListener里面的回調(diào)其實(shí)是debounce函數(shù)的返回值跌宛，所以debounce函數(shù)需要在return出去一個(gè)函數(shù)才能被addEventListener監(jiān)聽(tīng)回調(diào)酗宋，不然debounce的返回值就是undefined,
return出去的這個(gè)函數(shù)才是實(shí)現(xiàn)防抖功能的函數(shù)
function debounce(fn, delay){
function _debounce(){}
return _debounce
}
- 最基本的防抖函數(shù)
既然要延遲那就需要用定時(shí)器了，只要沒(méi)有到定時(shí)器執(zhí)行的時(shí)間疆拘，監(jiān)聽(tīng)的事件仍在觸發(fā)蜕猫，那就要清除上一個(gè)定時(shí)器，重新創(chuàng)建定時(shí)器哎迄，直到到了定時(shí)器執(zhí)行的時(shí)間用戶都沒(méi)有再輸入
function debounce(fn, delay) {
// 存儲(chǔ)定時(shí)標(biāo)識(shí)符回右，以便清除定時(shí)器
let timer = null
return function _debounce() {
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
fn()
}, delay)
}
}
- 處理參數(shù)和this
回調(diào)函數(shù)中是有參數(shù)的，比如說(shuō)事件源對(duì)象e漱挚，回調(diào)函數(shù)中的this是指向addEventListener的調(diào)用者的翔烁，上面的回調(diào)函數(shù)fn是獨(dú)立函數(shù)調(diào)用，里面的this -> window棱烂，所以要對(duì)fn進(jìn)行this綁定
回調(diào)函數(shù)中的參數(shù)是js內(nèi)部自動(dòng)添加的租漂，而執(zhí)行的回調(diào)正好是return出的_debounce，所以自動(dòng)添加的參數(shù)就會(huì)加到_debounce函數(shù)中，_debounce函數(shù)中的this也是addEventListener的調(diào)用者
function debounce(fn, delay) {
let timer = null
// 所以這個(gè)函數(shù)就可以使用...運(yùn)算符收集js自動(dòng)添加的參數(shù)到一個(gè)數(shù)組中
return function _debounce(...arg) {
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
// 通過(guò)apply綁定this和傳遞參數(shù)哩治，apply第二個(gè)參數(shù)正好是傳數(shù)組嘛
fn.apply(this, arg)
}, delay)
}
}
- 立即執(zhí)行
目前我們實(shí)現(xiàn)的防抖函數(shù)不能立即執(zhí)行秃踩，意思就是說(shuō)，我們?cè)赿elay時(shí)間段里不停的輸入业筏，那么每輸入一次就會(huì)取消上一次的定時(shí)器創(chuàng)建新的定時(shí)器憔杨，那么回調(diào)函數(shù)就永遠(yuǎn)不會(huì)執(zhí)行，這樣的話對(duì)用戶體驗(yàn)不好蒜胖，所以立即執(zhí)行的目的就是第一次輸入框發(fā)生變化就執(zhí)行一次回調(diào)fn
在debounce函數(shù)添加第三個(gè)參數(shù)immdiate 默認(rèn)為false消别，在_debounce函數(shù)外創(chuàng)建一個(gè)標(biāo)識(shí)，初始化為false台谢。
當(dāng)輸入框第一次發(fā)生變化執(zhí)行_debounce函數(shù)時(shí)先判斷immdiate 是否為ture并且isInvoke 是否為false寻狂，如果成立就立即執(zhí)行一次回調(diào)并將isInvoke 置為true，說(shuō)明已經(jīng)執(zhí)行過(guò)一次了朋沮，因?yàn)閕sInvoke 與_debounce之間形成了閉包蛇券，isInvoke不會(huì)被銷(xiāo)毀，那么再觸_debounce函數(shù)時(shí)isInvoke 就變成true了判斷不成立走else樊拓，直到定時(shí)器執(zhí)行了再將isInvoke還原置為false纠亚，這就是相當(dāng)于是一個(gè)周期了。下一次再輸入筋夏，立即執(zhí)行蒂胞，到定時(shí)器的回調(diào)執(zhí)行、下一次再輸入条篷，立即執(zhí)行骗随，到定時(shí)器的回調(diào)執(zhí)行、下一次再輸入赴叹，立即執(zhí)行蚊锹，到定時(shí)器的回調(diào)執(zhí)行······
function debounce(fn, delay, immdiate = false) {
let timer = null
let isInvoke = false
return function _debounce(...arg) {
if (timer) clearTimeout(timer)
if (immdiate && !isInvoke) {
fn.apply(this, arg)
isInvoke = true
} else {
timer = setTimeout(() => {
fn.apply(this, arg)
isInvoke = false
}, delay)
}
}
}
- 取消功能
那萬(wàn)一有一個(gè)需求取消執(zhí)行回調(diào)呢，哈哈哈稚瘾，就是在定時(shí)器的回調(diào)還沒(méi)執(zhí)行之前把他取消了牡昆，相信大家一下就知道，只需要將timer清除就行了
那要如何做呢摊欠？
我們可以再寫(xiě)一個(gè)cancel方法加到_debounce函數(shù)上丢烘，函數(shù)的本質(zhì)上也是一個(gè)對(duì)象嘛，所以就相當(dāng)于在_debounce函數(shù)對(duì)象上添加一個(gè)cancel屬性些椒，屬性值是一個(gè)函數(shù)
取消的邏輯不僅是清除timer還要對(duì)isInvoke 進(jìn)行還原播瞳，因?yàn)槿f(wàn)一用戶設(shè)置了立即執(zhí)行，定時(shí)器沒(méi)有執(zhí)行就沒(méi)有對(duì)isInvoke 進(jìn)行還原免糕，他又是一個(gè)閉包所以取消不還原那么他就保持了true赢乓，立即執(zhí)行的功能就會(huì)永遠(yuǎn)不執(zhí)行
function debounce(fn, delay, immdiate = false) {
let timer = null
let isInvoke = false
function _debounce(...arg) {
if (timer) clearTimeout(timer)
if (immdiate && !isInvoke) {
fn.apply(this, arg)
isInvoke = true
} else {
timer = setTimeout(() => {
fn.apply(this, arg)
isInvoke = false
timer = null
}, delay)
}
}
// 取消功能
_debounce.cancel = function () {
if (timer) clearTimeout(timer)
timer = null
isInvoke = false
}
return _debounce
}
那么調(diào)用方法就變了
要執(zhí)行取消忧侧，就得先獲取到_debounce函數(shù)對(duì)象
// 獲取dom的代碼未給出,相信你懂
// 要延遲的函數(shù)
const inputChange = function () {
console.log("輸入框發(fā)生變化")
}
// 獲取_debounce函數(shù)對(duì)象
const debounceChange = debounce(inputChange, 3000, false)
// 進(jìn)行input事件監(jiān)聽(tīng)
inputDom.addEventListener('input', debounceChange )
// 點(diǎn)擊按鈕取消
buttonDom.addEventListener('click', function () {
debounceChange.cancel()
})
- 獲取返回值
再來(lái)一個(gè)可能不存在的需求，如果我要獲取要延遲執(zhí)行的回調(diào)函數(shù)fn的返回值呢牌芋？蚓炬？？
const inputChange = function () {
console.log("輸入框發(fā)生變化")
return "想不到吧躺屁，產(chǎn)品經(jīng)理讓你得到我的返回值"
}
獲取fn的返回值有兩種方法肯夏；
Promise和傳入回調(diào)函數(shù)，經(jīng)過(guò)實(shí)踐這里使用Promise的方法來(lái)實(shí)現(xiàn)犀暑，用戶使用時(shí)不太優(yōu)雅就不說(shuō)了驯击，說(shuō)說(shuō)用回調(diào)吧
因?yàn)楹瘮?shù)中存在定時(shí)器，不能使用return返回值的方法耐亏，因?yàn)楹瘮?shù)都執(zhí)行完了定時(shí)器都還沒(méi)執(zhí)行徊都，return也不會(huì)執(zhí)行了
debounce函數(shù)添加第四個(gè)參數(shù)resultCallback，類(lèi)型是一個(gè)函數(shù)广辰，不管是立即執(zhí)行還是定時(shí)器執(zhí)行fn都獲取到fn的返回值碟贾，然后調(diào)用傳進(jìn)來(lái)的回調(diào)resultCallback，將這個(gè)結(jié)果作為回調(diào)resultCallback的參數(shù)轨域，然后使用者那么就能拿到這個(gè)結(jié)果了，下面附上使用方法
function debounce(fn, delay, immdiate = false, resultCallback) {
let timer = null
let isInvoke = false
function _debounce(...arg) {
if (timer) clearTimeout(timer)
if (immdiate && !isInvoke) {
const result = fn.apply(this, arg)
if (resultCallback && typeof resultCallback === "function") resultCallback(result)
isInvoke = true
} else {
timer = setTimeout(() => {
const result = fn.apply(this, arg)
if (resultCallback && typeof resultCallback === "function") resultCallback(result)
isInvoke = false
timer = null
}, delay)
}
}
_debounce.cancel = function () {
if (timer) clearTimeout(timer)
timer = null
isInvoke = false
}
return _debounce
}
使用方法
const inputChange = function () {
console.log("輸入框發(fā)生變化")
return "想不到吧杀餐，產(chǎn)品經(jīng)理讓你得到我的返回值"
}
const debounceChange = debounce(inputChange, 3000, false, (res) => {
console.log("fn的返回值是:" + res);
})
inputDom.addEventListener('input', debounceChange)
ok了干发，哪有寫(xiě)錯(cuò)了，請(qǐng)不吝指正
最后附上完整代碼
function debounce(fn, delay, immdiate = false, resultCallback) {
let timer = null
let isInvoke = false
function _debounce(...arg) {
if (timer) clearTimeout(timer)
if (immdiate && !isInvoke) {
const result = fn.apply(this, arg)
if (resultCallback && typeof resultCallback === "function") resultCallback(result)
isInvoke = true
} else {
timer = setTimeout(() => {
const result = fn.apply(this, arg)
if (resultCallback && typeof resultCallback === "function") resultCallback(result)
isInvoke = false
timer = null
}, delay)
}
}
_debounce.cancel = function () {
if (timer) clearTimeout(timer)
timer = null
isInvoke = false
}
return _debounce
}
