Js使用水桶簡單方便實現同步載入

h6play發表於2020-12-02
JS
  • 需要所有介面載入完畢後再進行處理事情
  • 需要優化多個 http/IO 介面巢狀導致效能變慢
  • 需要多個任務完成後再進行處理回撥
/*
 * 無資料水桶（僅用於同步載入回撥）
 */
function pail(len) {
    return {
        len: len,
        num: 0,
        t_fun: null,
        c_fun: null,
        // 設定正確回撥
        then: function (fun) {
            this.t_fun = fun;
            return this;
        },
        // 設定錯誤回撥
        catch: function (fun) {
            this.c_fun = fun;
            return this;
        },
        // 加入|執行 水桶
        pass: function () {
            this.num += 1;
            if (this.num >= this.len) {
                if (this.t_fun) {
                    this.t_fun(this)
                }
            }
        },
        // 執行失敗
        fail: function () {
            if (this.c_fun) {
                this.c_fun(this)
            }
        },
        // 是否滿足
        is_pass: function () {
            return this.num >= this.len;
        }
    }
}

/*
 * 有資料水桶（物件資料）
 */
function pail2(len) {
    return {
        len: len,
        num: 0,
        data: {},
        t_fun: null,
        c_fun: null,
        // 設定正確回撥
        then: function (fun) {
            this.t_fun = fun;
            return this;
        },
        // 設定錯誤回撥
        catch: function (fun) {
            this.c_fun = fun;
            return this;
        },
        // 加入|執行 水桶（並加入資料）
        push: function (key, value) {
            this.data[key] = value;
            this.pass();
        },
        // 加入|執行 水桶
        pass: function () {
            this.num += 1;
            if (this.num >= this.len) {
                if (this.t_fun) {
                    this.t_fun(this)
                }
            }
        },
        // 執行失敗
        fail: function () {
            if (this.c_fun) {
                this.c_fun(this)
            }
        },
        // 是否滿足
        is_pass: function () {
            return this.num >= this.len;
        }
    }
}

/*
 * 有資料水桶（陣列資料）
 */
function pail3(len) {
    return {
        len: len,
        num: 0,
        data: [],
        t_fun: null,
        c_fun: null,
        // 設定正確回撥
        then: function (fun) {
            this.t_fun = fun;
            return this;
        },
        // 設定錯誤回撥
        catch: function (fun) {
            this.c_fun = fun;
            return this;
        },
        // 加入|執行 水桶（並加入資料）
        push: function (value) {
            this.data.push(value);
            this.pass();
        },
        // 加入|執行 水桶
        pass: function () {
            this.num += 1;
            if (this.num >= this.len) {
                if (this.t_fun) {
                    this.t_fun(this)
                }
            }
        },
        // 執行失敗
        fail: function () {
            if (this.c_fun) {
                this.c_fun(this)
            }
        },
        // 是否滿足
        is_pass: function () {
            return this.num >= this.len;
        }
    }
}


// 模擬Vue內請求介面同步載入
let c = pail2(2);  // 構建請求2次的介面載入
c.then(r => {
    console.log("全部載入成功後要乾的事情", r.data)
})
.catch(e => {
    console.log("載入失敗後乾的事情")
})


// 請求使用者介面
setTimeout(function() {

    if(true) {
        c.push("user", {name:"張三", sex: "男"})
    } else {
        c.error()
    }

}, 1000)

// 請求金額介面
setTimeout(function() {

    if(true) {
        c.push("money", {amount: 0.12})
    } else {
        c.error()
    }

}, 1000)
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章