JavaScript 仅适用于浏览器调试器中设置的断点

Question

我在 JavaScript 中有一个基本函数，它只需要一些预设值，然后使用预制函数将它们显示在屏幕上。当我断点我正在做的第一行时，页面加载正常，正如预期的那样，但是一旦我删除了该断点，就没有设置任何信息。并且页面是空白的。

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

里面的函数（SetBackground 和 LoadInnerHTML）只是一小行改变内部 html 和设置背景图像的函数。

// Change Inner HTML
this.LoadInnerHTML = function (id, html) {
    var d = document.getElementById(id);
    d.innerHTML = html;
}

// Set Background Image
this.SetBackground = function (id, image) {
    document.getElementById(id).style.backgroundImage = 'url(image)';
}

我不明白为什么断点没有打开时它不起作用。显然它确实有效，因为在断点打开时一切都很好，但是当它关​​闭时，我得到的结果输出到控制台是：

1     
2 
3 undefined 
Quiz Selection 

Answer 1

你有一个竞争条件。

命中断点的行为会使您的代码等待异步 JSON 加载完成。如果没有断点，尝试读取 JSON 的代码将在 JSON 实际加载之前执行。

请参阅如何从异步调用返回响应？了解如何解决此问题。