underscore?防抖技巧學習示例
前言
又是一個源碼閱讀的周末，這次來閱讀和防抖相關(guān)的源碼。我已經(jīng)和防抖節(jié)流打過很多次交道了，感興趣的朋友也可以去看看我之前有關(guān)防抖節(jié)流的文章。咱們話不多說，直接進入正題。
underscore 和防抖
這次我們主要介紹防抖。（畢竟咱們標題就是跟著underscore學防抖??）
雖然我們對防抖的概念已經(jīng)很清楚了，但是我在這里還是不得不多提一嘴，關(guān)于防抖節(jié)流請務(wù)必好好掌握。那么，防抖該如何定義呢？防抖就是要延遲執(zhí)行，我們一直操作觸發(fā)事件并且不執(zhí)行，只有當停止操作后等才會執(zhí)行。防抖適合多次事件一次響應(yīng)的情況。
這里再介紹一下underscore吧。underscore是一個JavaScript工具庫，它提供了很多常用函數(shù)的源碼，這也就是此文標題的由來了??。
源碼解讀
我們找到如下部分即可。
整個防抖源碼的部分并不多，不過四十多行，源碼部分如下：
export default function debounce(func, wait, immediate) {
var timeout, previous, args, result, context;
var later = function () {
var passed = now() - previous;
if (wait > passed) {
timeout = setTimeout(later, wait - passed);
} else {
timeout = null;
if (!immediate) result = func.apply(context, args);
if (!timeout) args = context = null;
}
};
var debounced = restArguments(function (_args) {
context = this;
args = _args;
previous = now();
if (!timeout) {
timeout = setTimeout(later, wait);
if (immediate) result = func.apply(context, args);
}
return result;
});
debounced.cancel = function () {
clearTimeout(timeout);
timeout = args = context = null;
};
return debounced;
}
我們現(xiàn)在來分析一下這段代碼。
首先定義了一系列變量 timeout, previous, args, result, context。然后又定義了一個later函數(shù)，later函數(shù)中的 timeout=null 是為了清空timeout，也可以理解為在重置timeout，防止影響它下次使用。
然后在debounce函數(shù)執(zhí)行了later函數(shù)。
if (!timeout) {
timeout = setTimeout(later, wait);
if (immediate) result = func.apply(context, args);
}
和我們之前手寫代碼的防抖有所不同的是，這里加入了cancle取消方法，可以隨時取消執(zhí)行函數(shù)，這里算是整個源碼部分比較新穎的一點吧，我也是第一次認識到，學習了。
debounced.cancel = function () {
clearTimeout(timeout);
timeout = args = context = null;
};
總結(jié)
之前手寫過防抖節(jié)流，這次又跟著underscore學習防抖的源碼，我對防抖這一部分的認識又更進了一步，也對這些函數(shù)的運用有了更好的理解。除此之外，也了解了underscore這個工具庫，收獲滿滿。
以上就是underscore 防抖學習的詳細內(nèi)容，更多關(guān)于underscore 防抖的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
在這篇文章中，我將分享12個非常有用的JavaScript技巧。這些技巧可以幫助你減少并優(yōu)化代碼，需要的朋友參考下本文吧2017-05-05
JavaScript根據(jù)數(shù)據(jù)生成百分比圖和柱狀圖的實例代碼
這篇文章介紹了JavaScript根據(jù)數(shù)據(jù)生成百分比圖和柱狀圖的實例代碼，有需要的朋友可以參考一下2013-07-07
這篇文章主要介紹了JS傳值出現(xiàn)中文參數(shù)亂碼的解決方法,涉及javascript針對編碼的轉(zhuǎn)碼與解碼操作技巧,需要的朋友可以參考下2016-06-06
下面小編就為大家?guī)硪黄狫S 仿支付寶input文本輸入框放大組件的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
JavaScript字符和ASCII實現(xiàn)互相轉(zhuǎn)換
這篇文章主要介紹了JavaScript字符和ASCII實現(xiàn)互相轉(zhuǎn)換,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-06-06
這篇文章主要介紹了JavaScript常見繼承模式,結(jié)合實例形式總結(jié)分析了javascript原型鏈繼承、構(gòu)造函數(shù)繼承、組合繼承、原型式繼承、寄生式繼承等相關(guān)實現(xiàn)技巧與操作注意事項,需要的朋友可以參考下2019-01-01
本文將介紹如何利用 async-pool 這個庫提供的 asyncPool 函數(shù)來實現(xiàn)大文件的并行下載。2021-05-05
隨著Web開發(fā)技術(shù)的不斷發(fā)展,JavaScript已經(jīng)成為前端開發(fā)中不可或缺的一部分,下面我們就來看看如何使用JavaScript實現(xiàn)一個簡單的天氣應(yīng)用吧2024-01-01
這篇文章主要介紹了JS學習筆記之閉包,結(jié)合具體案例形式分析了javascript實現(xiàn)與使用閉包的相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
為body標簽和document.body都添加點擊事件后僅Firefox彈出了兩次
為body標簽和document.body都添加點擊事件后僅Firefox彈出了兩次，需要的朋友可以參考下。2011-04-04