0

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

我有这个功能。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()但结果相同。

4

3 回答 3

3

post调用是异步的：Async Javascript

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

这样想：

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. 
});
于 2013-09-10T05:48:24.597 回答
0

该帖子是异步的，返回不会转到您期望的函数，而是返回到成功处理程序：

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

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

编辑：

正如有些人在这里所说的那样，这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 代码不会冻结几秒钟。

于 2013-09-10T05:51:53.693 回答
0 
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

}
于 2013-09-10T05:59:14.103 回答