Js使用水桶简单方便实现同步加载

最新推荐文章于 2020-12-09 17:50:30 发布

h6play

最新推荐文章于 2020-12-09 17:50:30 发布

阅读量333

点赞数

分类专栏： js 解决方案 Web前端

本文链接：https://blog.csdn.net/u014771745/article/details/110475251

版权

解决方案同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

Web前端

10 篇文章 0 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

场景

需要所有接口加载完毕后再进行处理事情
需要优化多个 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)