underscore?防抖技巧學習示例
前言
又是一個源碼閱讀的周末，這次來閱讀和防抖相關的源碼。我已經和防抖節(jié)流打過很多次交道了，感興趣的朋友也可以去看看我之前有關防抖節(jié)流的文章。咱們話不多說，直接進入正題。
underscore 和防抖
這次我們主要介紹防抖。（畢竟咱們標題就是跟著underscore學防抖??）
雖然我們對防抖的概念已經很清楚了，但是我在這里還是不得不多提一嘴，關于防抖節(jié)流請務必好好掌握。那么，防抖該如何定義呢？防抖就是要延遲執(zhí)行，我們一直操作觸發(fā)事件并且不執(zhí)行，只有當停止操作后等才會執(zhí)行。防抖適合多次事件一次響應的情況。
這里再介紹一下underscore吧。underscore是一個JavaScript工具庫，它提供了很多常用函數的源碼，這也就是此文標題的由來了??。
源碼解讀
我們找到如下部分即可。
整個防抖源碼的部分并不多，不過四十多行，源碼部分如下：
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;
}
我們現在來分析一下這段代碼。
首先定義了一系列變量 timeout, previous, args, result, context。然后又定義了一個later函數，later函數中的 timeout=null 是為了清空timeout，也可以理解為在重置timeout，防止影響它下次使用。
然后在debounce函數執(zhí)行了later函數。
if (!timeout) {
timeout = setTimeout(later, wait);
if (immediate) result = func.apply(context, args);
}
和我們之前手寫代碼的防抖有所不同的是，這里加入了cancle取消方法，可以隨時取消執(zhí)行函數，這里算是整個源碼部分比較新穎的一點吧，我也是第一次認識到，學習了。
debounced.cancel = function () {
clearTimeout(timeout);
timeout = args = context = null;
};
總結
之前手寫過防抖節(jié)流，這次又跟著underscore學習防抖的源碼，我對防抖這一部分的認識又更進了一步，也對這些函數的運用有了更好的理解。除此之外，也了解了underscore這個工具庫，收獲滿滿。
以上就是underscore 防抖學習的詳細內容，更多關于underscore 防抖的資料請關注腳本之家其它相關文章！
相關文章
JavaScript+html5 canvas繪制漸變區(qū)域完整實例
這篇文章主要介紹了JavaScript+html5 canvas繪制漸變區(qū)域的方法,結合完整實例形式分析了canvas顏色調用與圖形繪制的相關技巧,需要的朋友可以參考下2016-01-01
前幾天一個同事問我如下的JavaScript代碼如何理解2009-06-06
這篇文章主要介紹了利用Vconsole和Fillder進行移動端抓包調試，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要為大家詳細介紹了原生js模擬購物車功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這是一個非常有趣的題目。我們先從Object.prototype.toString入手，看能否解決它。2010-02-02
這篇文章主要為大家詳細介紹了JS實現簡易計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
今天做網站的時候需要用上JS輪播圖代碼,而且還要求是原生的JS代碼,下面這篇文章主要給大家介紹了關于Html+CSS+JS輪播圖實現的相關資料,文中介紹的方法包括手動輪播和自動輪播,需要的朋友可以參考下2023-06-06
這篇文章主要為大家詳細介紹了原生JavaScript實現輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了通過WebSocket實現異步導出,本篇文章記錄大批量數據導出時間過長,導致接口請求超時問題,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-01-01
這篇文章介紹了JavaScript獲取多個數組的交集簡單實例，有需要的朋友可以參考一下2013-11-11