JavaScript-用js如何实现一个队列工具

UI设计界面 UI设计界面 主题:1059 回复:2190

JavaScript-用js如何实现一个队列工具

夜无邪 发布于 2016-11-07 字数 419 浏览 1143 回复 1

可能重复的问题
js如何实现队列的问题?

用js来来延迟某个动作触发,最简单的方式是用内部方法setTimeout(function(){}, time)来实现。如果想用其构建一个队列(queue)工具,可以塞进去很多ajax请求,并确保执行顺序是按插入的顺序执行,在任何时间暂停、删除、重试请求,同时也支持每个请求的订阅事件。 这样的一个队列工具如何设计

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

支持 Markdown 语法,需要帮助?

评论(1

虐人心 2017-07-24 1 楼

分享一个队列实现思路

Queue = function () {
// 请求队列
this.queue = [];
// 利用观察者对象来实现不同状态订阅随时订阅事件
this.onComplete = new util.Observer;
this.onFailure = new util.Observer;
this.onFlush = new util.Observer;

// 核心属性,在外部调用的时候进行重载设置

this.retryCount = 2;
this.currentRetry = 0;
this.paused = false;
this.timeout = 2000;
this.conn = {};
this.timer = {};
};

Queue.
method('flush', function () {
// flush方法
if (!this.queue.length > 0) {
return;
}

    if (this.paused) {
        this.paused = false;
        return;
    }

    var that = this;
    this.currentRetry++;
    var abort = function () {
        that.conn.abort();
        if (that.currentRetry == that.retryCount) {
            that.onFailure.fire();
            that.currentRetry = 0;
        } else {
            that.flush();
        }
    };

    this.timer = window.setTimeout(abort, this.timeout);
    var callback = function (o) {
        window.clearTimeout(that.timer);
        that.currentRetry = 0;
        that.queue.shift();
        that.onFlush.fire(o.responseText);
        if (that.queue.length == 0) {
            that.onComplete.fire();
            return;
        }
        that.flush();
    };

    this.conn = asyncRequest(
        this.queue[0]['method'],
        this.queue[0]['uri'],
        callback,
        this.queue[0]['params']
        );
}).
method('setRetryCount', function (count) {
    this.retryCount = count;
}).
method('setTimeout', function (time) {
    this.timeout = time;
}).
method('add', function (o) {
    this.queue.push(o);
}).
method('pause', function () {
    this.paused = true;
}).
method('dequeue', function () {
    this.queue.pop();
}).
method('clear', function () {
    this.queue = [];
});