Question

我正在构建一个javascript对象，主要应该在处理任何其他函数之前发送身份验证ajax请求。

示例：

hello={
say:function(txt){
alert(txt);
},
auth:function(){
... ajax ...
}
}

hello.say("hello world!");

在成功获取身份验证ajax请求之前，不应触发警报。就像在初始化完成之前将任何函数排队到对象一样。

P.S。当页面完全加载时，应该自动触发auth。

EDIT

尝试使用SLaks方法：

functionQueue = [];
function exec(func) {
    if (functionQueue){
        functionQueue.push(func);
    }else{ 
        func();
    }
}


hello={
say:function(txt){
alert(txt);
},
auth:function(){
ajax.post("http://www.hello.com",function(resp){
        var queue = functionQueue;
        functionQueue = false;    //Prevent re-entrancy
        for (var i = 0; i < queue.length; i++){
            queue[i]();
        }
});
}
}

function start(){
hello.auth();
}

window.addEventListener("load", start, false);
hello.say("hello world!");

非常感谢你的帮助。

谢谢！

Answer 1

创建一个要执行的函数数组，如果请求尚未完成，则将每个函数推送到数组，然后在AJAX请求完成时循环执行函数的数组。

例如：

var functionQueue = [];
function exec(func) {
    if (functionQueue)
        functionQueue.push(func);
    else    //AJAX request already finished
        func();
}
$.ajax({
    ...
    success: function(...) {
        ...
        var queue = functionQueue;
        functionQueue = false;    //Prevent re-entrancy
        for (var i = 0; i < queue.length; i++)
            queue[i]();
    }
});

编辑：Demo

2 ^nd编辑：要在对象中使用exec，保留this非常有用：

var functionQueue = [];
function exec(func, context) {
    if (functionQueue){
        functionQueue.push(function() { func.call(context); });
    } else {
        func.call(context);
    }
}

var hello = {
    say: function(txt){
        exec(function() {
            alert(txt);   //this still works
        }, this);
    },
    auth: function(){
        $.get("/echo/json/", function(resp){

            var queue = functionQueue;
            functionQueue = false;    //Prevent re-entrancy
            for (var i = 0; i < queue.length; i++){
                queue[i]();
            }
        });
    }
};


hello.say("hello world!");
hello.auth();

您可能希望将队列放在对象中：

var hello = {
    functionQueue: [],
    exec: function(func) {
        if (this.functionQueue){
            this.functionQueue.push(func);
        } else {
            func.call(this);
        }
    },
    say: function(txt){
        this.exec(function() {
            alert(txt);   //this still works
        });
    },
    auth: function(){
        var me = this;
        $.get("/echo/json/", function(resp){
            alert('AJAX finished!');

            var queue = me.functionQueue;
            functionQueue = false;    //Prevent re-entrancy
            for (var i = 0; i < queue.length; i++){
                queue[i].call(me);
            }
        });
    }
};


hello.say("hello world!");
hello.auth();

如何在JS类中对函数进行排队，直到完成必要的ajax请求

1 个答案: