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实际加载之前执行。

有关如何解决此问题，请参阅How do I return the response from an asynchronous call?。

Answer 2

您的代码中包含console.log个语句。当调试器没有打开时，控制台对象不存在（对于IE而言，这不是我所知道的Chrome），因此你的javascript代码执行失败。

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

2 个答案: