Javascript数组未定义？ [复制]

Question

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

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

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

但是，当我尝试使用该函数时（如下图所示的 2 种方式），我被告知该数组未定义。为什么会这样？

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. 
});

Answer 2

var questions; // undefined right now
initQuestions(function(_questions){
  questions = _questions; // the value has been set thanks to the anonymous function you passed as the callback
})

function initQuestions(callback  // this is a callback function reference) {

  // This HTTP Post call takes time to complete and is done asynchronously
  $.post("quiz.php", { 'func': 'load' }, function(data) {
    var q = data.split(".\n");
    // Luckily your initQuestions now takes in a callback function
    // You have access to the callback function here and when ready you can use it
    callback(q);
  });
  // JavaScript engine doesn't wait for your HTTP call to complete 
  // and will continue to execute the function
  // In this case, your function isn't returning anything hence undefined

}

Answer 3

帖子是异步的，返回的不是你期望的函数，而是成功的处理程序：

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

here 是如何抑制异步行为并实现你想要的

编辑：

正如这里有些人所说，asych = false 是一个坏主意，因为它会冻结您的 JS 代码，直到请求完成（连接速度慢可能需要几秒钟），所以解决方案是在成功函数中做任何您想做的事情：

questions = initQuestions(); //wrong
fillDivsWithData(questions); //use callback instead:

function initQuestions() {
  $.post("quiz.php", { 'func': 'load' }, function(data) {
    var q = data.split(".\n");
    console.log(q); //diplay this in you browser's JS console
    fillDivsWithData(q);
  });
}

结果是一样的，但是由于异步请求，如果你有土豆互联网连接，你的 JS 代码不会冻结几秒钟。