異步函數順序執行的實現（下）

（這個內容很早就寫完了，放在了CSDN上，把這半截忘記了。。。）

接上節。

在上面的基礎上，我們使用構造函數的方法，把代碼重新整理一下（結構）。

function Chain(){
    this.taskList = [], 
    this.errorList = [], 
    this.successList = [],
    this.length = arguments.length;
    for (i = 0; i < this.length; i++) {
        this.taskList.push(arguments[i]);
    }

    this.next = function() {
        if (this.taskList.length > 0){
            this.inject(this.taskList[0]);
        }
        else output.innerText += '任務全部完成';
    }

    this.start = function() {
        this.next();
    }

    this.setTimeout = function(fn, time) {
        //處理setTimeout
    }

    this.ajax = function() {
        //處理ajax
    }
}

再寫幾個異步的函數用於測試

function A() {
    setTimeout("output.innerText += '第一個異步函數，延遲1秒執行\\n'", 1000);
}

function B() {
    output.innerText += '第二個普通函數，無延遲，立即執行\n';
}

function C() {
    setTimeout(function() {
        output.innerText += '第三個異步函數，延遲1秒執行\n';
    }, 1000);
}

function D(text) {
    output.innerText += '第四個普通函數，自定義文字：' + text + '，無延遲，立即執行\n';
}

function E() {
    ajax({
        url: "test2.html",
    beforeSend:function(){
            output.innerText += '第五個異步ajax函數，讀取本頁源碼\n';
        },
        success: function(){
            output.innerText += '讀取完成，執行下一個函數\n';
        }
    })
}

function F() {
    setTimeout(function() {
        output.innerText += '第六個異步函數，延遲1秒執行\n';
    }, 1000);
}

測試

var job = new Chain(A, B, C, function a(){
    D('函數傳參');
}, E, F);
job.start();

完整代碼測試頁面：
https://html50.github.io/chain.js/test2.html

這樣算是基本的功能完成了。根據我的測試，如果要應用到具體的工作中，還是使用PROMISE比較靠譜。而且我寫的這個函數對於ajax setTimeout的操作不夠靈活，不可以嵌套，不可以混合使用。但是這些都是可以改進的，即進行更深的匹配修改。實現的本身也可以當做一種不同的思路吧。

一個異步讀取圖片並展示的DEMO：
https://html50.github.io/chain.js/