Question

我正在做类似的事情：

var globals = {
   variable: undefined
};
function Tools() { }
Tools.ajax = function() {
        var xmlhttp;
        return {
            createXmlhttp: function() {
                if (window.XMLHttpRequest) {
                    xmlhttp = new XMLHttpRequest();
                } else {
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
            },
            onreadystatechange: function(action) {
                xmlhttp.onreadystatechange = function () {
                    if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
                        action(xmlhttp.responseText);
                    }
                };
            },
            execute: function(action, url, data) {
                this.createXmlhttp();
                this.onreadystatechange(action);
                xmlhttp.open("POST", url, true);
                xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                xmlhttp.send(data);
            }
        };
    };
    Tools.getFromApi = function(fooBar) {
        var url = "http://some_url.com/ajax_request.php";
        var data = "fooBar=" + fooBar;

        this.ajax().execute(function(responseText) {
            globals.variable = responseText;
        }, url, data);
    };

然后我从不同的函数调用此方法，并想提醒globals.variable的内容：

function anotherFunction() {
   Tools.getFromApi("aaa");
   alert(globals.variable);
}

问题是我的变量在这里是空的，因为ajax还没有得到响应。警报之前的某种睡眠功能可能会解决问题，但是再一次，JS中没有睡眠功能，我不知道睡了多久。

我该如何解决这个问题？

Answer 1

这是因为ajax调用是异步的。

解决此问题的一种方法是将回调传递给您的函数并在获得响应后调用它：

Tools.getFromApi = function (fooBar, callback) {
    var url = "http://some_url.com/ajax_request.php";
    var data = "fooBar=" + fooBar;

    this.ajax().execute(function (responseText) {
        globals.variable = responseText;
        callback();
    }, url, data);
};


Tools.getFromApi("aaa", function(){
    alert(globals.variable);
});

以下是JSFIDDLE示例。

等待ajax完成

1 个答案: