Analysis of jsdeferred principle of JavaScript asynchronous programming-JS Tutorial-php.cn

1. Preface

Recently I was reading "JavaScript Framework Design" by Situ Zhengmei. I saw that the chapter on asynchronous programming introduced the jsdeferred library. I thought it was very interesting. I spent a few days studying the code and made it here. Share it now.

Asynchronous programming is a very important concept in writing js. Especially when dealing with complex applications, asynchronous programming skills are crucial. So let’s take a look at this so-called landmark asynchronous programming library.

2. API source code analysis

2.1 Constructor

A safe constructor is used here to avoid errors when calling the constructor without using new. Two forms are provided to obtain Deferred object instances.

function Deferred() {
    return (this instanceof Deferred) ? this.init() : new Deferred();
}

// 方式1 
var o1 = new Deferred();
// 方式2
var o2 = Deferred();

Copy after login

2.2 Deferred.define()

This method can wrap an object, specify the method of the object, or directly expose the method of the Deferred object to the global scope, so that it can be used directly.

Deferred.methods = ["parallel", "wait", "next", "call", "loop", "repeat", "chain"];
/*
    @Param obj 赋予该对象Deferred的属性方法
    @Param list 指定属性方法
*/
Deferred.define = function(obj, list){
    if(!list)list = Deferred.methods;
    // 获取全局作用域的技巧，利用立即执行函数的作用域为全局作用域的技巧
    if(!obj) obj = (function getGlobal(){return this})();
    // 将属性都挂载到obj上
    for(var i = 0; i < list.length; i++){
        var n = list[i];
        obj[n] = Deferred[n];
    }
    return Deferred;
}

this.Deferred = Deferred;

Copy after login

2.3 Asynchronous operation implementation

There are many ways to implement asynchronous operations in JSDeferred, which is also the most outstanding part of this framework. The methods are:

script.onreadystatechange (for IE5.5~8)

img .onerror/img.onload (asynchronous operation method for modern browsers)

For node environment, use process.nextTick to implement asynchronous calls (obsolete)

setTimeout (default)

It will depend on the browser to choose the best Fast API.

Use script's onreadystatechange event. It should be noted that the browser has a limit on the number of concurrent requests (2~3 for IE5.5~8, 6 for IE9+ and modern browsers). When the number of concurrent requests is greater than the above The time limit will cause the request initiation operation to be queued for execution, resulting in more serious delays. The idea of the code is to take 150ms as a cycle. Each cycle starts with asynchronous execution initiated through setTimeout. Other asynchronous execution operations within the cycle are implemented through script requests. If this method is called frequently, it means that the upper limit of concurrent requests has been reached. The higher the possibility, so the cycle time can be lowered, for example, set to 100ms to avoid high delays caused by queuing.

Deferred.next_faster_way_readystatechange = ((typeof window === "object") && 
(location.protocol == "http:") && 
!window.opera &&
/\bMSIE\b/.test(navigator.userAgent)) &&
function (fun) {
var d = new Deferred();
var t = new Date().getTime();
if(t - arguments.callee._prev_timeout_called < 150){
var cancel = false; // 因为readyState会一直变化，避免重复执行
var script = document.createElement("script");
script.type = "text/javascript";
// 发送一个错误的url，快速触发回调，实现异步操作
script.src = "data:text/javascript,";
script.onreadystatechange = function () {
    if(!cancel){
        d.canceller();
        d.call();
    }
};

d.canceller = function () {
    if(!cancel){
        cancel = true;
        script.onreadystatechange = null;
        document.body.removeChild(script);// 移除节点
    }
}；

// 不同于img，需要添加到文档中才会发送请求
document.body.appendChild(script);
} else {
// 记录或重置起始时间
arguments.callee._prev_timeout_called = t; 
// 每个周期开始使用setTimeout
var id = setTimeout(function (){ d.call()}, 0);
d.canceller = function () {clearTimeout(id)};
}
if(fun)d.callback.ok = fun;
return d;
}

Copy after login

Use the img method, use the src attribute error reporting and binding event callbacks to perform asynchronous operations

Deferred.next_faster_way_Image = ((typeof window === "object") &&
(typeof Image != "undefined") && 
!window.opera && document.addEventListener) && 
function (fun){
var d = new Deffered();
var img = new Image();
var hander = function () {
d.canceller();
d.call();
}
img.addEventListener("load", handler, false);
img.addEventListener("error", handler, false);

d.canceller = function (){
img.removeEventListener("load", handler, false);
img.removeEventListener("error", handler, false);
}
// 赋值一个错误的URL
img.src = "data:imag/png," + Math.random();
if(fun) d.callback.ok = fun;
return d;
}

Copy after login

For the Node environment, use process.nextTick to implement asynchronous calls

Deferred.next_tick = (typeof process === &#39;object&#39; &&
typeof process.nextTick === &#39;function&#39;) && 
function (fun) {
var d = new Deferred();
process.nextTick(function() { d.call() });
if (fun) d.callback.ok = fun;
return d;
};

Copy after login

setTimeout. This method has A minimum time interval for triggering. In older IE browsers, the time interval may be slightly longer (15ms).

Deferred.next_default = function (fun) {
var d = new Deferred();
var id = setTimeout(function(){
clearTimeout(id);
d.call(); // 唤起Deferred调用链
}, 0)
d.canceller = function () {
try{
    clearTimeout(id);
}catch(e){}
};
if(fun){
d.callback.ok = fun;
}
return d;
}

Copy after login

The default order is

Deferred.next = 
    Deferred.next_faster_way_readystatechange || // 处理IE
    Deferred.next_faster_way_Image || // 现代浏览器
    Deferred.next_tick || // node环境
    Deferred.next_default; // 默认行为

Copy after login

According to JSDeferred official data, using next_faster_way_readystatechange and next_faster_way_Image is more than 700% faster than the original setTimeout asynchronous method.

After looking at the data, in fact, the browser versions compared are relatively old, and the performance improvement in modern browsers should not be that obvious.

2.4 Prototype method

Implemented in the prototype method of Deferred

_id 用来判断是否是Deferred的实例，原因好像是Mozilla有个插件也叫Deferred，因此不能通过instanceof来检测。cho45于是自定义标志位来作检测，并在github上提交fxxking Mozilla。

init 初始化，给每个实例附加一个_next和callback属性

next 用于注册调用函数，内部以链表的方式实现，节点为Deferred实例，调用的内部方法_post

error 用于注册函数调用失败时的错误信息，与next的内部实现一致。

call 唤起next调用链

fail 唤起error调用链

cancel 执行cancel回调，只有在唤起调用链之前调用才有效。（调用链是单向的，执行之后就不可返回）

Deferred.prototype = {
    _id : 0xe38286e381ae, // 用于判断是否是实例的标识位
    init : function () {
        this._next = null; // 一种链表的实现思路
        this.callback = {
            ok : Deferred.ok, // 默认的ok回调
            ng : Deferred.ng  // 出错时的回调
        };
        return this;
    },
    next : function (fun) {
        return this._post("ok", fun); // 调用_post建立链表
    },
    error : function (fun) {
        return this._post("ng", fun); // 调用_post建立链表
    },
    call : function(val) {
        return this._fire("ok", val); // 唤起next调用链
    },
    fail : function (err) {
        return this._fire("ng", err); // 唤起error调用链
    },
    cancel : function () {
        (this.canceller || function () {}).apply(this);
        return this.init(); // 进行重置
    },
    _post : function (okng, fun){ // 建立链表
        this._next = new Deferred();
        this._next.callback[okng] = fun;
        return this._next;
    },
    _fire : function (okng, fun){
        var next = "ok";
        try{
            // 注册的回调函数中，可能会抛出异常，用try-catch进行捕捉
            value = this.callback[okng].call(this, value); 
        } catch(e) {
            next = "ng";
            value = e; // 传递出错信息
            if (Deferred.onerror) Deferred.onerror(e); // 发生错误的回调
        }
        if (Deferred.isDeferred(value)) { // 判断是否是Deferred的实例
            // 这里的代码就是给Deferred.wait方法使用的，
            value._next = this._next;
        } else { // 如果不是，则继续执行
            if (this._next) this._next._fire(next, value);
        }
        return this;
    }
}

Copy after login

2.5 辅助静态方法

上面的代码中，可以看到一些Deferred对象的方法（静态方法），下面简单介绍一下：

// 默认的成功回调
Deferred.ok = function (x) {return x};

// 默认的失败回调
Deferred.ng = function (x) {throw x};

// 根据_id判断实例的实现
Deferred.isDeferred = function (obj) {
    return !!(obj && obj._id === Deferred.prototype._id);
}

Copy after login

2.6 简单小结

看到这里，我们需要停下来，看看一个简单的例子，来理解整个流程。

Defferred对象自身有next属性方法，在原型上也定义了next方法，需要注意这一点，例如以下代码：

var o = {};
Deferred.define(o);
o.next(function fn1(){
    console.log(1);
}).next(function fn2(){
    console.log(2);
});

Copy after login

o.next()是Deffered对象的属性方法，这个方法会返回一个Defferred对象的实例，因此下一个next()则是原型上的next方法。

第一个next()方法将后续的代码变成异步操作，后面的next()方法实际上是注册调用函数。

在第一个next()的异步操作里面唤起后面next()的调用链（d.call()），开始顺序的调用，换句话说就是，fn1和fn2是同步执行的。

那么，如果我们希望fn1和fn2也是异步执行，而不是同步执行的，这就得借助Deferred.wait方法了。

2.7 wait & register

我们可以使用wait来让fn1和fn2变成异步执行，代码如下：

Deferred.next(function fn1() {
    console.log(1)
}).wait(0).next(function fn2() {
    console.log(2)
});

Copy after login

wait方法很有意思，在Deferred的原型上并没有wait方法，而是在静态方法上找到了。

Deferred.wait = function (n) {
    var d = new Deferred(),
        t = new Date();
    // 使用定时器来变成异步操作
    var id = setTimeout(function () {
        d.call((new Date()).getTime() - t.getTime());
    }, n * 1000);

    d.canceller = function () {
        clearTimeout(id);
    }
    return d;
}

Copy after login

那么这个方法是怎么放到原型上的？原来是通过Deferred.register进行函数转换，绑定到原型上的。

Deferred.register = function (name, fun){
    this.prototype[name] = function () { // 柯里化
        var a = arguments;
        return this.next(function(){
            return fun.apply(this, a);
        });
    }
};

// 将方法注册到原型上
Deferred.register("wait", Deferred.wait);

Copy after login

我们需要思考为什么要用这种方式将wait方法register到Deferred的原型对象上去？，因为明显这种方式有点难以理解。

结合例子，我们进行讨论，便能够彻底地理解上述的问题。

Deferred.next(function fn1(){ // d1
    console.log(1);
})
.wait(1) // d2
.next(function fn2(){ // d3
    console.log(2);
});

Copy after login

这段代码首先会建立一个调用链

Analysis of jsdeferred principle of JavaScript asynchronous programming

之后，执行的过程为（如图所示）

Analysis of jsdeferred principle of JavaScript asynchronous programming

我们来看看执行过程的几个关键点

图中的d1、d2、d3、d_wait表示在调用链上生成的Deferred对象的实例

在调用了d2的callback.ok即包装了wait()方法的匿名函数之后，返回了在wait()方法中生成的Deferred对象的实例d_wait，保存在变量value中，在_fire()方法中有一个if判断

if(Deferred.isDeferred(value)){
    value._next = this._next;
}

Copy after login

在这里并没有继续往下执行调用链的函数，而是重新建立了一个调用链，此时链头为d_wait，在wait()方法中使用setTimeout，使其异步执行，使用d.call()重新唤起调用链。

Copy after login

理解了整个过程，就比较好回到上面的问题了。之所以使用register的方式是因为原型上的wait方法并非直接使用Deferred.wait，而是把Deferred.wait方法作为参数，对原型上的next()方法进行curry化，然后返回一个柯里化之后的next()方法。而Deferred.wait()其实和Deferred.next()的作用很类似，都是异步执行接下来的操作。

2.8 并归结果 parallel

设想一个场景，我们需要多个异步网络查询任务，这些任务没有依赖关系，不需要区分前后，但是需要等待所有查询结果回来之后才能进一步处理，那么你会怎么做？在比较复杂的应用中，这个场景经常会出现，如果我们采用以下的方式（见伪代码）

var result = [];
$.ajax("task1", function(ret1){
    result.push(ret1);
    $.ajax("task2", function(ret2){
        result.push(ret2);
        // 进行操作
    });
});

Copy after login

这种方式可以，但是却无法同时发送task1和task2（从代码上看还以为之间有依赖关系，实际上没有）。那怎么解决？这就是Deferred.parallel()所要解决的问题。

我们先来个简单的例子感受一下这种并归结果的方式。

Deferred.parallel(function () {
    return 1;
}, function () {
    return 2;
}, function () {
    return 3;
}).next(function (a) {
    console.log(a); // [1,2,3]
});

Copy after login

在parallel()方法执行之后，会将结果合并为一个数组，然后传递给next()中的callback.ok中。可以看到parallel里面都是同步的方法，先来看看parallel的源码是如何实现，再来看看能不能结合所学来改造实现我们所需要的ajax的效果。

Deferred.parallel = function (dl) {
    /* 
        前面都是对参数的处理，可以接收三种形式的参数 
        1. parallel(fn1, fn2, fn3).next()
        2. parallel({
                foo : $.get("foo.html"),
                bar : $.get("bar.html")
            }).next(function (v){
                v.foo // => foo.html data
                v.bar // => bar.html data
            });
        3. parallel([fn1, fn2, fn3]).next(function (v) {
                v[0] // fn1执行的结果
                v[1] // fn2执行的结果
                v[3] // fn3执行返回的结果
            });
    */
    var isArray = false;
    // 第一种形式
    if (arguments.length > 1) {
        dl = Array.prototype.slice.call(arguments);
        isArray = true;
    // 其余两种形式，数组，类数组
    } else if (Array.isArray && Array.isArray(dl) 
                || typeof dl.length == "number") {
        isArray = true;
    }
    var ret = new Deferred(), // 用于归并结果的Deferred对象的实例
        value = {}, // 收集函数执行的结果
        num = 0 ; // 计数器，当为0时说明所有任务都执行完毕
    
    // 开始遍历，这里使用for-in其实效率不高
    for (var i in dl) {
        // 预防遍历了所有属性，例如toString之类的
        if (dl.hasOwnProperty(i)) {
            // 利用闭包保存变量状态
            (function (d, i){
                // 使用Deferred.next()开始一个异步任务，并且执行完成之后，收集结果
                if (typeof d == "function") dl[i] = d = Deferred.next(d);
                d.next(function (v) {
                    values[i] = v;
                    if( --num <= 0){ // 计数器为0说明所有任务已经完成，可以返回
                        if(isArray){ // 如果是数组的话，结果可以转换成数组
                            values.length = dl.length;
                            values = Array.prototype.slice.call(values, 0);
                        }
                        // 调用parallel().next(function(v){})，唤起调用链
                        ret.call(values);
                    }
                }).error(function (e) {
                    ret.fail(e);
                });
                num++; // 计数器加1
            })(d[i], i);
        } 
    }
    
    // 当计算器为0的时候，处理可能没有参数或者非法参数的情况
    if (!num) {
        Deferred.next(function () { 
            ret.call();
        });
    } 

    ret.canceller = function () {
        for (var i in dl) {
            if (dl.hasOwnProperty(i)) {
                dl[i].cancel();
            }
        }
    };
    return ret; // 返回Deferred实例
};

Copy after login

结合上述知识，我们可以在parallel中使用异步方法，代码如下

Deferred.parallel(function fn1(){
    var d = new Deferred();
    $.ajax("task1", function(ret1){
        d.call(ret1);
    });
    return d;
}, function () {
    var d = new Deferred();
    $.ajax("task2", function fn2(ret2) {
        d.call(ret2)
    });
    return d;
}).next(function fn3(ret) {
    ret[0]; // => task1返回的结果
    ret[1]; // => task2返回的结果
});

Copy after login

为什么可以这样？我们来图解一下，加深一下理解。

Analysis of jsdeferred principle of JavaScript asynchronous programming