JavaScript 数组未定义？

Question

这个问题已经有答案了:

How do I return the response from an asynchronous call? (42 个回答)

已关闭 9 年前。

这似乎是一个微不足道的问题，但我无法解决。

我有这个功能。 var q被分配给一个字符串数组。 alert(q)调用函数时成功打印整个数组。

function initQuestions() {
    $.post("quiz.php", { 'func': 'load' }, function(data) {
        var q = data.split(".\n");
        alert(q);
        return q;
    });
}

但是，当我尝试使用该函数时(如下以两种方式描述)，我被告知该数组未定义。为什么会这样？

var questions;

$(function() {
    //This doesn't work
    questions = initQuestions();
    alert(questions);

    //Neither does this
    alert(initQuestions());
});

经过进一步研究，我添加了一个回调到 initQuestions()但我得到了相同的结果。

Answer 1

post调用是异步的:Async Javascript

基本上，initQuestions() 函数在 post 完成之前返回 null

这样想:

function initQuestions() {
    $.post("quiz.php", { 'func': 'load' }, function(data) {
        var q = data.split(".\n");
        alert(q);
        return q; // <- returns to the caller of function(data), not initQuestions()!
    });
    return null; // <- This happens before function(data) is complete
}

为了使其按预期工作，您需要在发布成功并完成时提供回调。

function initQuestions(callback) {
    $.post("quiz.php", { 'func': 'load' }, function(data) {
        var q = data.split(".\n");
        alert(q);
        callback(q);
    });
}

var questions;

function doSomthingWithQuestions() {
    alert(questions); // <- should work
    // do the things with the questions
}

$(function() {
    initQuestions(function(result) {
       questions = result;
       doSomethingWithQuestions();
    });

    // Don't use `questions` here as the callback hasn't fired yet. 
});