Функции JavaScript Обратный звонок

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