2

刚写完一篇debounce(防抖)函数的实现,我又看了下underscore.js的实现方法。算是趁热打铁,分析一下underscore里实现的套路。

先贴上源码:

_.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;
    };
};

一看可能有点多,我简化一下,整体其实就两部分:

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

    // 函数的回调部分
    // 当immediate === false时
    // func真正的执行部分
    function later(){};
    
    return function(){
        // 在这里判断func是否立即执行
        // 是否有计时器的存在
    }
}

上一篇文章已经分析过this的指向和event的传递,这里就不多说了。直接来分析返回的匿名函数部分。

return function() {
        context = this;
        args = arguments;
        // 这里调用了underscore封装的调用时间戳的方法
        // 等同于
        // 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;
        }
    };

这里我要说的是timestamp,它存储的是动作发生时的时间戳,假设我这里调用debounce时传入的wait为10000,也就是10秒。我第一次调用事件函数是在10:00:00,按照设定,10:00:10之后才能调用第二次方法,在这10秒内,任何调用都是不执行的。

当我第一次执行事件时

timeout = undefined;
immediate先设置为false

所以

callNow === false

只有这句话是执行的

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

那接着来看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内重复输入,我们取消事件的方法是这样的

if(timer){clearTimeout(timer)}

但在这里,我们是不是都还没看到怎么处理wait时间内,重复输入无效的问题?别急,现在就来说。玄妙都在这个last变量上。

之前说过,timestamp存储的是第一次事件执行时的时间戳(10:00:00),但现在我没想等十秒,过了五秒我就触发了第二次事件。所以timestamp现在的内容就变成新的时间戳了(10:00:05)。但问题是,timer的回调函数至少要到10:00:10之后才会执行,也就是说

last>=5

由于代码执行堵塞导致last>10的情况有可能存在,但是不符合我们现在讨论的,而且真的是太特殊了,我们就不说了。那就假设last为5秒(5000ms)。

last < wait && last >= 0

这句话就是true,那就执行里面的代码。但注意看里面计时器对于时间的写法。

wait - last

换个说法就是,你在10:00:00启动了我,但是你在10:00:05又动了,我原本应该在10:00:10执行,但是现在惩罚你提前行动,那你之前等的时间就不算,你要再重新多等这几秒10:00:15。

这个难点解决了,其他就都好说。

lster剩余的部分就是判断如果当初设置的是立即执行(immediate = true),func就不再执行一遍了,否则(immediate = false)func执行。

恩,那这个的解读就结束了,有什么地方我没写清楚的话,请给我留言。


Aria
962 声望49 粉丝