Question

我遇到一个问题，即在完成该功能之后加载来自JSON文件的信息，以便在JavaScript中将其显示给浏览器。我一直在研究this stackoverflow post，它解释了如何解决这个问题，但是我在不使用JQuery的情况下无法弄清楚如何做到这一点。我知道JQuesry是更好的方法，不幸的是我只能使用JavaScript。

首先我获取JSON信息：

// Generic Function to get JSON data
    this.getJSON = function (url, callback) {
        var xhr = new XMLHttpRequest();
        xhr.open('get', url, true);
        xhr.responseType = 'json';
        xhr.onload = function() {
            var status = xhr.status;
            if (status == 200) {
                callback(null, xhr.response);
            } else {
                callback(status);
            }
        };
        xhr.send();
    }

然后我把它放到一个JavaScript对象中：

this.GetQuiz = function () {
        var thisQuiz = this;
        // Get the extract the quiz from the JSON folder
        app.getJSON('json/demo.json', function(err, data) {
            if (err != null) { // If there's a problem
                // Add a debug for getting the quiz JSON
                console.log('Unable to load quiz: ' + err);
            } else {
                // Load the quiz into the quiz base
                this.Title = data.title;
                this.Introduction = data.longtitle;
                this.HeroImage = imgBase + 'products/' + data.img;
                this.About = data.extra;
                // Set How To Play
                if(this.Type == 'Knowledge') { // Knowledge Quiz
                    this.HowToPlayText = "Knowledge, how to play text...";
                } else if (this.Type == 'Identity') { // Identity Quiz
                    this.HowToPlayText = "Identity, how to play text...";
                } else if (this.Type == 'TrueFalse') { // TrueFalse Quiz
                    this.HowToPlayText = "True/false, how to play text...";
                }
                // Make sure we can see what we are loading if nothing displays
                console.log('We are loading the quiz for the ' + this.Title + ' range');
                // Load Questions
                thisQuiz.GetQuestions();
            }
        }.bind(this));
    }.bind(this);

然后我调用一个函数来向浏览器显示该对象的部分内容：

this.QuizSelection = function () {
        // Fill the ID's with the right info
        app.SetBackground('head', this.HeroImage);
        console.log('1 ' + this.HeroImage);
        app.LoadInnerHTML('breadcrumbs', 'Home / ' + this.Title);
        app.LoadInnerHTML('quizSelectionTitle',this.Title);
        console.log('2 ' + this.Title);
        app.LoadInnerHTML('quizSelectionIntro',this.Introduction);
        console.log('3 ' + this.Introduction);
        // Show the Quiz Selection and Heading
        app.ShowSection('head');
        app.ShowSection('quizSelection');
        console.log('Quiz Selection');
    }.bind(this);

这全部包含在我在页面加载时调用的两个函数中：

window.onload = function () {
    var quiz = new QuizBase('Knowledge', 'Product');
    quiz.GetQuiz();
    quiz.QuizSelection();
}

我基本上需要一种在quiz.QuizSelection();完成后运行quiz.GetQuiz();的方法。

Answer 1

首先，可以将回调函数作为GetQuiz

的参数传递

this.GetQuiz = function (callback) {
  ...
}

然后在getJSON()的回调中，在检查if (err != null)块中的else之后，检查是否设置了你的回调，如果是，称之为：

if (typeof callback === 'function')  {
  callback();
}
// or a shorter way of doing this:
callback && callback();

然后你可以使用

quiz.GetQuiz(quiz.QuizSelection);

达到理想的秩序。

您可能必须对thisQuiz.GetQuestions()方法执行相同操作，如果必须在QuizSelection()运行之前进行。因此，您只需将回复从quiz.GetQuiz()传递给thisQuiz.GetQuestions()。

异步调用导致信息在加载之前显示

1 个答案: