Question

我正在尝试从数据库中读取一些问题和答案。问题将作为文本写入页面，而答案将是下拉菜单。即你最喜欢的颜色是什么？蓝色，绿色等。我的问题是它们没有以正确的顺序出现。我调用getData函数进入一个循环并获得每个问题的答案。它进入getAnswers函数但不进入嵌入式函数。它返回到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的退货处理程序将会发生。

一种解决方案是传入问题元素，因此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函数回调

1 个答案: