手寫Spirit防抖函數(shù)underscore和節(jié)流函數(shù)lodash
前言
防抖函數(shù)和節(jié)流函數(shù),無論是寫業(yè)務(wù)的時(shí)候還是面試的時(shí)候,想必大家已經(jīng)聽過很多次了吧.但是大家在用到的時(shí)候,有了解過他們之間的區(qū)別嘛,他們是如何實(shí)現(xiàn)的呢?還是說只是簡單的調(diào)用下像lodash和underscore這種第三方庫提供給我們的節(jié)流和防抖函數(shù)呢?
防抖函數(shù)和節(jié)流函數(shù)的區(qū)別
防抖函數(shù):是指觸發(fā)了一個(gè)事件,在規(guī)定的時(shí)間內(nèi),如果沒有第二次事件被觸發(fā),那么他就會(huì)執(zhí)行.換句話講,就是說,如果不斷有事件被觸發(fā),那么規(guī)定的執(zhí)行時(shí)間將會(huì)被不斷推遲
節(jié)流函數(shù):指的是在規(guī)定時(shí)間內(nèi),你無論觸發(fā)多少次事件,你也只會(huì)執(zhí)行一次.我舉個(gè)生活中的例子,就很好理解了.王者榮耀這個(gè)游戲可能很多人多玩過,每個(gè)英雄都有自己的技能,在我們點(diǎn)擊一次后,該技能會(huì)進(jìn)入冷卻時(shí)間,即使我們點(diǎn)的再快,該技能在冷卻時(shí)間好之前也只能觸發(fā)一次(我們第一次點(diǎn)擊的時(shí)候)
防抖函數(shù)的實(shí)現(xiàn)
我將實(shí)現(xiàn)防抖函數(shù)的四個(gè)功能,希望大家能一步步的跟著來,循序漸進(jìn),相信大家一定會(huì)有收獲的
基本實(shí)現(xiàn)
我們可以想下,要想一個(gè)事件在規(guī)定時(shí)間過后執(zhí)行,在JS中該怎么實(shí)現(xiàn)
好 時(shí)間到
定時(shí)器,小伙伴們肯定都知道的吧
觸發(fā)事件,在一定時(shí)間后執(zhí)行,這個(gè)可以使用定時(shí)器解決了.
那么 接下來還有一個(gè)問題 在觸發(fā)事件后,再觸發(fā)事件,該如何讓他推遲執(zhí)行呢?
如果規(guī)定時(shí)間內(nèi),再觸發(fā)的話,我們就把之前創(chuàng)建的定時(shí)器刪除不就好了,對(duì)不對(duì)?
這樣是不是就解決了我們的問題,好,我們現(xiàn)在來寫下代碼,怕大家有點(diǎn)不明白
function debounce(fn, delay) {
//定義一個(gè)定時(shí)器
let timer = null;
// 每次觸發(fā)的時(shí)候 清空上一次的定時(shí)器
const _debounce = function () {
if (timer) clearTimeout(timer);
//根據(jù)傳進(jìn)來的延時(shí) 執(zhí)行
timer = setTimeout(() => {
fn();
}, delay)
}
return _debounce;
}
這段代碼還是比較容易的吧,相信小伙伴們肯定都懂了
但是這段代碼還是有點(diǎn)問題,我們來調(diào)用下第三方庫的underscore的防抖函數(shù)
<body>
<button>取消</button>
<input type="text">
<script src="https://cdn.jsdelivr.net/npm/underscore@1.13.1/underscore-umd-min.js"></script>
<script>
const btn = document.querySelector("button");
const input = document.querySelector("input");
let count = 0;
function test(event) {
// 注意這里的this 和 event
console.log(`發(fā)送${++count}網(wǎng)絡(luò)請(qǐng)求`, this, event);
return "我是返回結(jié)果";
}
input.oninput = _.debounce(test, 2000);
</script>
</body>
我們打開瀏覽器調(diào)試,看下輸出結(jié)果
可以看到this和Event輸出是沒有任何問題的.
再來看看我們的輸出
你會(huì)發(fā)現(xiàn) this是window了 而Event是undefined.
這是為什么呢?
這是因?yàn)?我們寫的代碼沒有對(duì)this進(jìn)行一個(gè)綁定,同時(shí)也沒有將DOM元素的event接收
fn()直接執(zhí)行 這時(shí)候的this是直接指向window的
function debounce(fn, delay) {
let timer = null;
//使用剩余參數(shù)接收所有的參數(shù) DOM在調(diào)用這個(gè)函數(shù)的時(shí)候,我們就能接收到event了
const _debounce = function (...args) {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
//注意 我們使用apply進(jìn)行一個(gè)換綁,綁到執(zhí)行這個(gè)的DOM元素上
fn.apply(this,args);
}, delay)
}
return _debounce;
}
至此,我們這個(gè)防抖函數(shù)的基本實(shí)現(xiàn)就沒有任何問題了
看到這里的小伙伴們,你們真不錯(cuò)
這個(gè)基本實(shí)現(xiàn) 拿來應(yīng)付面試已經(jīng)夠了,接下來我們還有一些額外的功能要實(shí)現(xiàn),想看的可以繼續(xù)往下看了,現(xiàn)在不想看的也可以收藏下,以后來看.
立即執(zhí)行
在某些應(yīng)用場(chǎng)景下,比如搜索的時(shí)候,你輸入第一個(gè)字符的時(shí)候,他就會(huì)聯(lián)想出一系列的字符,他不會(huì)等待一段時(shí)間后再去執(zhí)行,而是會(huì)立馬執(zhí)行,我們接下來實(shí)現(xiàn)下這個(gè)功能
首先,立即執(zhí)行這個(gè)功能,我們可以將它交給用戶來決定是不是要使用這個(gè)功能
debounce(fn,delay,immediate=false)
我們以參數(shù)的形式傳遞,默認(rèn)是關(guān)閉的
好,我們現(xiàn)在來看下代碼實(shí)現(xiàn)
function debounce(fn, delay, immediate = false) {
let timer = null;
//代碼規(guī)范 我們最好不要修改 用戶傳遞進(jìn)來的參數(shù)
//所以我們?cè)谙旅媛暶髁艘粋€(gè)變量 用于控制
let isInvoke = false;
const _debounce = function (...args) {
if (timer) clearTimeout(timer);
//如果immdiate為true
//isInvoke取反為true
if (immediate && !isInvoke) {
//會(huì)立馬執(zhí)行一次
fn.apply(this, args);
//同時(shí)將isInvoke設(shè)置為true,防止下次觸發(fā)的時(shí)候 又再次觸發(fā)立即執(zhí)行
isInvoke = true;
} else {
//第一次觸發(fā)結(jié)束立即執(zhí)行后
//isInvoke會(huì)限定在定時(shí)器中 輸入結(jié)束后 才會(huì)重新刷新isInvoke
timer = setTimeout(() => {
//剩下的操作在規(guī)定時(shí)間內(nèi) 會(huì)等待定時(shí)器結(jié)束
fn.apply(this, args);
//同時(shí)重新刷新inInvoke
isInvoke = false;
}, delay)
}
}
return _debounce;
}
好,這一塊還是比較簡單的吧,相比大家應(yīng)該看懂了,如果有什么不懂的地方,歡迎評(píng)論區(qū)留言,我看見了就會(huì)回答的
那么我們開始下一個(gè)篇章的 如果用戶輸入之后 不想讓他請(qǐng)求呢 這時(shí)候我們就需要一個(gè)取消功能了,對(duì),我們接下來就是要實(shí)現(xiàn)取消功能了
取消功能
我們?cè)撊绾卧谑Ｓ嗟臅r(shí)間內(nèi)取消請(qǐng)求呢?
對(duì) 沒錯(cuò)! 清空定時(shí)器
我們只需要在我們返回的函數(shù)上加個(gè)靜態(tài)方法 給用戶提供個(gè)取消功能即可
我們來看下代碼實(shí)現(xiàn)
// 給返回的這個(gè)函數(shù)添加一個(gè)靜態(tài)方法 用于取消請(qǐng)求
_debounce.cancel = function () {
if (timer) clearTimeout(timer);
}
是不是很簡單呢? 就這么簡單一行代碼 取消功能就完成了
好,我們還有最后一個(gè)功能需要實(shí)現(xiàn)的 那就是如果開發(fā)者想要拿到請(qǐng)求后的返回結(jié)果的話,我們現(xiàn)階段的防抖函數(shù)能不能做到呢? 貌似不行吧?
所以接下來,我們來實(shí)現(xiàn)最后一個(gè)功能 取到返回結(jié)果
返回結(jié)果
我們思考一個(gè)問題 返回結(jié)果在哪呢?
用戶傳遞一個(gè)函數(shù)給我們 返回一個(gè)新的函數(shù)
那么返回結(jié)果一定是在用戶傳遞給我們的那個(gè)函數(shù)上的
所以關(guān)鍵就是 將用戶的那個(gè)函數(shù)的返回結(jié)果傳遞出來
現(xiàn)在 我們這里有兩個(gè)方案
- 回調(diào)函數(shù)
- Promise
我們先來看下回調(diào)函數(shù)的版本
// 回調(diào)函數(shù)版本
function debounce(fn, delay, immediate = false, resultCallBack) {
let timer = null;
let isInvoke = false;
let result = null;
const _debounce = function (...args) {
if (timer) clearTimeout(timer);
if (immediate && !isInvoke) {
//接收結(jié)果
result = fn.apply(this, args);
resultCallBack(result);
isInvoke = true;
} else {
timer = setTimeout(() => {
//接收結(jié)果
result = fn.apply(this, args);
resultCallBack(result);
isInvoke = false;
}, delay)
}
}
_debounce.cancel = function () {
if (timer) clearTimeout(timer);
timer = null;
isInvoke = false;
}
return _debounce;
}
實(shí)際應(yīng)用
const _debounce = () => {
debounce(test, 1000)().then(res => {
console.log(res);
})
}
input.oninput = _debounce;
回調(diào)函數(shù)的是不是比較簡單? 我們來看下Promise版本的 在實(shí)際應(yīng)用的時(shí)候要注意一些坑
function debounce(fn, delay, immediate = false) {
let timer = null;
let isInvoke = false;
let result = null;
const _debounce = function (...args) {
//在返回的函數(shù)中 直接整體返回一個(gè)Promsie對(duì)象
//將結(jié)果傳入 resolve中
return new Promise((resolve, rejected) => {
if (timer) clearTimeout(timer);
if (immediate && !isInvoke) {
result = fn.apply(this, args);
resolve(result)
isInvoke = true;
} else {
timer = setTimeout(() => {
result = fn.apply(this, args);
resolve(result);
isInvoke = false;
}, delay)
}
})
}
_debounce.cancel = function () {
if (timer) clearTimeout(timer);
timer = null;
isInvoke = false;
}
return _debounce;
}
實(shí)際調(diào)用
const _debounce = function(...args){
debounce(test, 1000).apply(this,args).then(res => {
console.log(res);
})
};
input.oninput = _debounce;注意到了吧 我們對(duì)原來的函數(shù)又封裝了一層 因?yàn)橹挥羞@樣才能拿到promise的結(jié)果
同時(shí)this和event不會(huì)出問題
看到這里的小伙伴們真棒,相信你們防抖函數(shù)一定沒問題了,待會(huì)我們就開始講解 節(jié)流函數(shù)該如何實(shí)現(xiàn)
節(jié)流函數(shù)的實(shí)現(xiàn)
節(jié)流函數(shù)我們也是從幾個(gè)方面逐步實(shí)現(xiàn),帶著大家一步步的解開節(jié)流函數(shù)的面紗.
基本實(shí)現(xiàn)
大家可以想下,節(jié)流函數(shù)該如何實(shí)現(xiàn).
一段時(shí)間內(nèi),只會(huì)觸發(fā)一次操作,后續(xù)的操作就不會(huì)被觸發(fā).
我們可以拿到當(dāng)前的時(shí)間戳 來進(jìn)行計(jì)算
我們直接通過代碼來講吧 比較方便講
function throttle(fn, interval) {
let lastTime = 0;
const _throttle = function () {
//首先拿到當(dāng)前的時(shí)間
const nowTime = new Date().getTime();
//傳遞進(jìn)來的時(shí)間間隔 用當(dāng)前的時(shí)間減去上一次觸發(fā)的時(shí)間
//得到最新的剩余時(shí)間
const reamainTime = interval - (nowTime - lastTime);
if (reamainTime <= 0) {
fn();
//如果剩余時(shí)間小于0 說明已經(jīng)達(dá)到一個(gè)間隔
//并且將現(xiàn)在的時(shí)間賦值給lastTime
//在時(shí)間間隔內(nèi) 這樣無論執(zhí)行多少次 都只會(huì)執(zhí)行第一次的操作
//因?yàn)榈谝淮蔚膌astTime是0 而nowTime是比較大的
//減去之后一定是個(gè)負(fù)數(shù) 所以會(huì)執(zhí)行第一次
//而不會(huì)執(zhí)行后續(xù)的操作
lastTime = nowTime;
}
}
return _throttle;
}
大家看下我上面這段代碼 還是比較好理解的吧,面試的話能夠?qū)懗鲞@一部分已經(jīng)很可以了,但是要想更加出彩,能和面試官多嘮會(huì)的吧,我們接著看下面的實(shí)現(xiàn)
leading實(shí)現(xiàn)
我們?cè)诨緦?shí)現(xiàn)中,其實(shí)已經(jīng)將這個(gè)功能已經(jīng)實(shí)現(xiàn)了,但是并不是可以控制的,我們這個(gè)實(shí)現(xiàn)是將是否首次觸發(fā)交給用戶來決定,大家可以想下該如何實(shí)現(xiàn)
基本實(shí)現(xiàn)中,我們是如何實(shí)現(xiàn)第一次觸發(fā)的?
是不是通過拿到的時(shí)間戳非常大,而lastTime為0所導(dǎo)致的呢?
所以我們是不是可以讓lastTime也能拿到當(dāng)前的時(shí)間戳呢,這樣子, nowTime和lastTime相減的時(shí)候,是不是就不會(huì)變成負(fù)數(shù)呢?
代碼實(shí)現(xiàn)
// 考慮到 我們后面會(huì)有很多功能要實(shí)現(xiàn)
//所以我們使用選項(xiàng)來進(jìn)行配置.避免造成更多參數(shù)
function throttle(fn, interval, option = { leading: true }) {
let lastTime = 0;
const { leading } = option;
const _throttle = function () {
const nowTime = new Date().getTime();
//在 leading和lastTime為false的情況下
//就將nowTime賦值給lastTime,這樣就不會(huì)在第一次就執(zhí)行操作了
if (!leading && !lastTime) lastTime = nowTime;
const reamainTime = interval - (nowTime - lastTime);
if (reamainTime <= 0) {
fn();
lastTime = nowTime;
}
}
return _throttle;
}
大家是不是理解了呢? 我個(gè)人認(rèn)為還是比較好懂的吧,不懂的可以在評(píng)論區(qū)留言,我看到就會(huì)給大家解答的
接下來,我們看下和這個(gè)情況相反的一種狀況,如果我們想要在最后一次操作的時(shí)候進(jìn)行一次觸發(fā)操作的話,該如何去做呢?
trailing實(shí)現(xiàn)
這一塊是比較難的部分了,會(huì)有點(diǎn)難,大家不懂的話,要多看幾遍,實(shí)在有不明白的,歡迎評(píng)論區(qū)留言
首先最后一次觸發(fā)操作時(shí),我們?cè)撛趺礃幼屗鼒?zhí)行?
我提供一個(gè)思路,當(dāng)我們最后一次觸發(fā)操作的時(shí)候,拿到距離間隔還有多少時(shí)間結(jié)束,加上一個(gè)定時(shí)器,讓他根據(jù)這個(gè)剩余時(shí)間去按時(shí)執(zhí)行
代碼實(shí)現(xiàn)
function throttle(fn, interval, option = { leading: true, tralling: false }) {
let lastTime = 0;
let timer = null;
const { leading, tralling } = option;
const _throttle = function (...args) {
const nowTime = new Date().getTime();
if (!leading && !lastTime) lastTime = nowTime;
const reamainTime = interval - (nowTime - lastTime);
if (reamainTime <= 0) {
fn.apply(this, args);
lastTime = nowTime;
if (timer) {
clearTimeout(timer)
timer = null;
}
// 如果執(zhí)行了這一部分 那么后面的tralling就沒有必要去執(zhí)行
// 說明剛好執(zhí)行到了這一步 后面的最后按下 就不需要
return;
}
if (tralling && !timer) {
timer = setTimeout(() => {
timer = null;
/** `
* 首先 按下第一次的時(shí)候 這個(gè)定時(shí)器已經(jīng)被加上了
* 每次進(jìn)來的時(shí)候 等待一定時(shí)間 定時(shí)器會(huì)被置空 方便下次使用
* 根據(jù)剩余時(shí)間 來判斷執(zhí)行
* 如果leading為false lastTime會(huì)被設(shè)置為0 會(huì)在規(guī)定的剩余時(shí)間到達(dá)后 去執(zhí)行這個(gè)函數(shù) 而remianTime那個(gè)部分就不會(huì)被執(zhí)行 因?yàn)閞emainTime會(huì)一直保持在一個(gè)正數(shù)狀態(tài)
* 如果leading為true lastTime會(huì)被設(shè)置為當(dāng)前的時(shí)間 這樣在下一次的操作下,remainTime才會(huì)發(fā)生變化
*
*/
lastTime = !leading ? 0 : new Date().getTime();
fn.apply(this, args);
}, reamainTime)
}
}
return _throttle;
}
是不是比較難懂呢? 我在來解釋一下啊
首先如果remainTime已經(jīng)小于0了,那么fn就會(huì)去執(zhí)行,我們也就不需要去執(zhí)行后續(xù)的操作了 會(huì)直接返回
那么如果remainTime沒有小于0,我們會(huì)設(shè)置定時(shí)器,在定時(shí)器內(nèi)部,我們需要先把timer清空,防止下一次觸發(fā)的時(shí)候又觸發(fā)了.
其次,我們要將lastTime進(jìn)行一個(gè)處理
如果我們之前設(shè)置的leading是false的話,那么我們需要將lastTime置為0,這樣在下一次的觸發(fā)操作的時(shí)候,才能觸發(fā)leading為false的情況下的邏輯語句
leading為true的情況下,需要將lastTime設(shè)置為當(dāng)前的時(shí)間戳,這樣在下一次的操作的時(shí)候,才會(huì)remainTime才會(huì)發(fā)生變化,邏輯才能執(zhí)行下去.
大家有沒有聽明白呢? 可能是會(huì)有點(diǎn)難懂,但是好好多看幾遍,還是能夠理解的我相信!!!
接下來的操作就比較簡單了,大家可以安心食用,和防抖函數(shù)一樣,是取消功能和返回結(jié)果
取消功能和返回結(jié)果
因?yàn)檫@個(gè)和防抖函數(shù)是一樣的,所以我這里直接就放代碼了
function throttle(fn, interval, option = { leading: true, tralling: false, resultCallback }) {
let lastTime = 0;
let timer = null;
let result = null;
const { leading, tralling, resultCallback } = option;
// 兩種結(jié)果回調(diào)
//和防抖函數(shù)是一樣的
//1. 通過傳遞一個(gè)回調(diào)函數(shù)
//2. 通過promise 進(jìn)行結(jié)果回調(diào)
const _throttle = function (...args) {
return new Promise((resolve, reject) => {
const nowTime = new Date().getTime();
if (!leading && !lastTime) lastTime = nowTime;
const reamainTime = interval - (nowTime - lastTime);
if (reamainTime <= 0) {
result = fn.apply(this, args);
resultCallback(result);
resolve(result);
lastTime = nowTime;
if (timer) {
clearTimeout(timer)
timer = null;
}
return;
}
if (tralling && !timer) {
timer = setTimeout(() => {
timer = null;
lastTime = !leading ? 0 : new Date().getTime();
result = fn.apply(this, args);
resultCallback(result);
resolve(result);
}, reamainTime)
}
})
}
//取消功能
_throttle.cancel = function () {
if (timer) clearTimeout(timer);
timer = null;
lastTime = 0;
}
return _throttle;
}
大家可以看下是不是一摸一樣的呢? 非常輕松吧
以上就是手寫Spirit防抖函數(shù)underscore和節(jié)流函數(shù)lodash的詳細(xì)內(nèi)容，更多關(guān)于pirit防抖函數(shù)underscore節(jié)流函數(shù)lodash的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
下面小編就為大家?guī)硪黄趈s中document.cookie全面解析。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了如何通過javaScripte去除字符串兩端的空白字符,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
javascript跳轉(zhuǎn)與返回和刷新頁面的實(shí)例代碼
這篇文章主要介紹了javascript跳轉(zhuǎn)與返回和刷新頁面的實(shí)例代碼，簡單介紹了javascript中window.open()與window.location.href的區(qū)別，感興趣的朋友一起看看吧2019-11-11
JS實(shí)現(xiàn)金額轉(zhuǎn)換(將輸入的阿拉伯?dāng)?shù)字)轉(zhuǎn)換成中文的實(shí)現(xiàn)代碼
這篇文章介紹了JS實(shí)現(xiàn)金額轉(zhuǎn)換(將輸入的阿拉伯?dāng)?shù)字)轉(zhuǎn)換成中文的實(shí)現(xiàn)代碼，有需要的朋友可以參考一下，希望對(duì)大家有用2013-09-09
JavaScript使用addEventListener添加事件監(jiān)聽用法實(shí)例
這篇文章主要介紹了JavaScript使用addEventListener添加事件監(jiān)聽的方法,實(shí)例分析了addEventListener方法的相關(guān)使用技巧,需要的朋友可以參考下2015-06-06
JavaScript中的普通函數(shù)與構(gòu)造函數(shù)比較
這篇文章主要介紹了JavaScript中的普通函數(shù)與構(gòu)造函數(shù)比較,需要的朋友可以參考下2015-04-04
原生JS實(shí)現(xiàn)逼真的圖片3D旋轉(zhuǎn)效果詳解
這篇文章主要介紹了原生JS實(shí)現(xiàn)逼真的圖片3D旋轉(zhuǎn)效果,結(jié)合實(shí)例形式詳細(xì)分析了javascript實(shí)現(xiàn)圖片3D旋轉(zhuǎn)相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2019-02-02
這篇文章主要給大家介紹了關(guān)于理解JSONP并拓展的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-01-01
weixin-java-miniapp微信小程序登陸具體實(shí)現(xiàn)
這篇文章主要介紹了weixin-java-miniapp微信小程序登陸具體實(shí)現(xiàn)的相關(guān)資料,包括用戶授權(quán)、獲取code、發(fā)送到后臺(tái)、后臺(tái)驗(yàn)證并獲取openid和session_key、返回驗(yàn)證結(jié)果等步驟,需要的朋友可以參考下2025-02-02
眾所周知，js是客戶端的，那么把驗(yàn)證都做在客戶端有意義嗎？還是必須從服務(wù)器生成的驗(yàn)證碼安全??？前端生成的驗(yàn)證碼安全嗎？x下面我們來看個(gè)例子2015-05-05