JavaScript 函数回调

Question

我正在尝试从数据库中读取一些问题和答案。问题将作为文本写入页面，而答案将是下拉菜单。即你最喜欢什么颜色？蓝色、绿色等我的问题是它们没有按正确的顺序出现。我调用 getData 函数，它进入循环并获取每个问题的答案。它进入 getAnswers 函数但不进入嵌入式函数。它改为 returns 到 getData 函数并在进入函数并获得答案之前完成所有问题。这会导致打印出所有问题，然后打印出所有答案。我希望它是一个问题，然后是答案等等。我已经尝试摆脱额外的功能并将所有内容都放入一个功能中，但它仍然不起作用并且使代码难以阅读。我认为这是由 JavaScript 的函数回调引起的，但对 JavaScript 的了解还不够确定。任何帮助将不胜感激。

function getData(){
            $.getJSON("questions.php", "",
                function(data) {
                    $.each(data, function(key, val) {
                        $("#divButton").append($('<p>' + val.question + '</p>'));
                        getAnswers(val.questionID);

                    });
                }
            );
        }

function getAnswers(questionID){
            //Gets to here when first called
            $.getJSON("answers.php",{id:questionID},
                function(data){
                    //Doesn't get to here until all questions have been written to page
                    var string = "<select>";
                    $.each(data, function(key, val) {
                        string += "<option>" + val.answer + "</option>";
                    });
                    string += "</select></br>";
                    $("#divButton").append($(string));
                }
            );
        }

Answer 1

getAnswers 的 return 处理程序将在您写完所有问题后发生。

一个解决方案是传入问题元素，这样 getAnswers 就知道在哪里插入结果：

function getData(){
            $.getJSON("questions.php", "",
                function(data) {
                    $.each(data, function(key, val) {
                        var question = $('<p>' + val.question + '</p>')
                                         .appendTo($('#divButton'));
                        getAnswers(val.questionID, question);

                    });
                }
            );
        }

function getAnswers(questionID, questionElement){
            //Gets to here when first called
            $.getJSON("answers.php",{id:questionID},
                function(data){
                    //Doesn't get to here until all questions have been written to page
                    var string = "<select>";
                    $.each(data, function(key, val) {
                        string += "<option>" + val.answer + "</option>";
                    });
                    string += "</select></br>";
                    $(string).insertAfter(questionElement);
                }
            );
        }

JavaScript 函数回调

JavaScript Functions Callback

javascript

function

callback