underscore源碼解讀之debounce

Flink_China 發(fā)布于2019-08-22 11:14 / 2031人閱讀

摘要：直接來(lái)分析返回的匿名函數(shù)部分。我第一次調(diào)用事件函數(shù)是在，按照設(shè)定，之后才能調(diào)用第二次方法，在這秒內(nèi)，任何調(diào)用都是不執(zhí)行的。這個(gè)難點(diǎn)解決了，其他就都好說(shuō)。恩，那這個(gè)的解讀就結(jié)束了，有什么地方我沒(méi)寫(xiě)清楚的話(huà)，請(qǐng)給我留言。

剛寫(xiě)完一篇debounce(防抖)函數(shù)的實(shí)現(xiàn)，我又看了下underscore.js的實(shí)現(xiàn)方法。算是趁熱打鐵，分析一下underscore里實(shí)現(xiàn)的套路。

先貼上源碼：

_.debounce = function(func, wait, immediate) {
    var timeout, args, context, timestamp, result;

    var later = function() {
        var last = _.now() - timestamp;
        console.log(last)
        if (last < wait && last >= 0) {
            console.log(1)
            timeout = setTimeout(later, wait - last);
        } else {
            console.log(2)
            timeout = null;
            if (!immediate) {
                result = func.apply(context, args);
                if (!timeout) context = args = null;
            }
        }
    };

    return function() {
        context = this;
        args = arguments;
        timestamp = _.now();
        var callNow = immediate && !timeout;
        console.log(timeout)
        if (!timeout) timeout = setTimeout(later, wait);
        if (callNow) {
            result = func.apply(context, args);
            context = args = null;
        }

        return result;
    };
};

一看可能有點(diǎn)多，我簡(jiǎn)化一下，整體其實(shí)就兩部分：

_.debounce = function( func, wait, immediate){

    // 函數(shù)的回調(diào)部分
    // 當(dāng)immediate === false時(shí)
    // func真正的執(zhí)行部分
    function later(){};
    
    return function(){
        // 在這里判斷func是否立即執(zhí)行
        // 是否有計(jì)時(shí)器的存在
    }
}

上一篇文章已經(jīng)分析過(guò)this的指向和event的傳遞，這里就不多說(shuō)了。直接來(lái)分析返回的匿名函數(shù)部分。

return function() {
        context = this;
        args = arguments;
        // 這里調(diào)用了underscore封裝的調(diào)用時(shí)間戳的方法
        // 等同于
        // timestamp = Date.now()
        timestamp = _.now();
        var callNow = immediate && !timeout;
        console.log(timeout)
        if (!timeout) timeout = setTimeout(later, wait);
        if (callNow) {
            result = func.apply(context, args);
            context = args = null;
        }
    };

這里我要說(shuō)的是timestamp，它存儲(chǔ)的是動(dòng)作發(fā)生時(shí)的時(shí)間戳，假設(shè)我這里調(diào)用debounce時(shí)傳入的wait為10000，也就是10秒。我第一次調(diào)用事件函數(shù)是在10:00:00，按照設(shè)定，10:00:10之后才能調(diào)用第二次方法，在這10秒內(nèi)，任何調(diào)用都是不執(zhí)行的。

當(dāng)我第一次執(zhí)行事件時(shí)

timeout = undefined;
immediate先設(shè)置為false

所以

callNow === false

只有這句話(huà)是執(zhí)行的

if (!timeout) timeout = setTimeout(later, wait);

那接著來(lái)看later都有什么：

var later = function() {
  //     var last = Date.now() - timestamp;
    var last = _.now() - timestamp;
    console.log(last)
    if (last < wait && last >= 0) {
        console.log(1)
        timeout = setTimeout(later, wait - last);
    } else {
        console.log(2)
        timeout = null;
        if (!immediate) {
            result = func.apply(context, args);
            if (!timeout) context = args = null;
        }
    }
};

在上一篇中，判斷wait內(nèi)重復(fù)輸入，我們?nèi)∠录姆椒ㄊ沁@樣的

if(timer){clearTimeout(timer)}

但在這里，我們是不是都還沒(méi)看到怎么處理wait時(shí)間內(nèi)，重復(fù)輸入無(wú)效的問(wèn)題？別急，現(xiàn)在就來(lái)說(shuō)。玄妙都在這個(gè)last變量上。

之前說(shuō)過(guò)，timestamp存儲(chǔ)的是第一次事件執(zhí)行時(shí)的時(shí)間戳（10:00:00），但現(xiàn)在我沒(méi)想等十秒，過(guò)了五秒我就觸發(fā)了第二次事件。所以timestamp現(xiàn)在的內(nèi)容就變成新的時(shí)間戳了（10:00:05）。但問(wèn)題是，timer的回調(diào)函數(shù)至少要到10:00:10之后才會(huì)執(zhí)行，也就是說(shuō)

last>=5

由于代碼執(zhí)行堵塞導(dǎo)致last>10的情況有可能存在，但是不符合我們現(xiàn)在討論的，而且真的是太特殊了，我們就不說(shuō)了。那就假設(shè)last為5秒（5000ms）。

last < wait && last >= 0

這句話(huà)就是true，那就執(zhí)行里面的代碼。但注意看里面計(jì)時(shí)器對(duì)于時(shí)間的寫(xiě)法。

wait - last

換個(gè)說(shuō)法就是，你在10:00:00啟動(dòng)了我，但是你在10:00:05又動(dòng)了，我原本應(yīng)該在10:00:10執(zhí)行，但是現(xiàn)在懲罰你提前行動(dòng)，那你之前等的時(shí)間就不算，你要再重新多等這幾秒10：00：15。

這個(gè)難點(diǎn)解決了，其他就都好說(shuō)。

lster剩余的部分就是判斷如果當(dāng)初設(shè)置的是立即執(zhí)行（immediate = true），func就不再執(zhí)行一遍了，否則（immediate = false）func執(zhí)行。

恩，那這個(gè)的解讀就結(jié)束了，有什么地方我沒(méi)寫(xiě)清楚的話(huà)，請(qǐng)給我留言。

GPU云服務(wù)器云服務(wù)器 underscore源碼分析源碼解讀 webrtc源碼解讀 webrtc fec源碼解讀

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/92012.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Flink_China

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

用C語(yǔ)言來(lái)寫(xiě)“煙花”，快拿去給心中的那個(gè)人看

閱讀 3311·2021-11-18 10:02
JavaScript疑難雜癥系列-相等性判斷

閱讀 2757·2019-08-30 13:56
CSS3學(xué)習(xí)筆記

閱讀 419·2019-08-29 12:36
走在 SVG + Low Poly 的路上

閱讀 530·2019-08-28 18:07
Builder——用Ruby創(chuàng)建XML

閱讀 720·2019-08-27 10:51
vue移動(dòng)端項(xiàng)目的適配(以mint-ui為例)

閱讀 3455·2019-08-26 12:13
NPM酷庫(kù)044：json5，更可讀的JSON

閱讀 3295·2019-08-26 11:46
vue插件開(kāi)發(fā)流程詳解-從開(kāi)發(fā)到發(fā)布至npm（二）

閱讀 3321·2019-08-23 12:00

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

underscore源碼解讀之debounce

相關(guān)文章

**淺談 Underscore.js 中 _.throttle 和 _.debounce 的差異**

JavaScript 函數(shù)節(jié)流和函數(shù)去抖應(yīng)用場(chǎng)景辨析

JavaScript專(zhuān)題系列文章

JavaScript專(zhuān)題系列20篇正式完結(jié)！

**一次發(fā)現(xiàn)underscore源碼bug的經(jīng)歷以及對(duì)學(xué)術(shù)界拿來(lái)主義的思考**

發(fā)表評(píng)論

0條評(píng)論

Flink_China

男|高級(jí)講師

TA的文章

用C語(yǔ)言來(lái)寫(xiě)“煙花”，快拿去給心中的那個(gè)人看

JavaScript疑難雜癥系列-相等性判斷

CSS3學(xué)習(xí)筆記

走在 SVG + Low Poly 的路上

Builder——用Ruby創(chuàng)建XML

vue移動(dòng)端項(xiàng)目的適配(以mint-ui為例)

NPM酷庫(kù)044：json5，更可讀的JSON

vue插件開(kāi)發(fā)流程詳解-從開(kāi)發(fā)到發(fā)布至npm（二）

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

underscore源碼解讀之debounce

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！