Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JavaScript only works with a breakpoint set in browser debugger [duplicate]

Tags:

javascript

I have a basic function in JavaScript that simply takes some pre-set values and puts them onto the screen by the use of a pre-made function. When I breakpoint the first line of what it is I'm doing, the page loads fine, as expected, but as soon as I remove that breakpoint, none of the information is set. and the page is blank.

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

The functions inside that (SetBackground and LoadInnerHTML) are just small one line functions that change the inner html and the set a background image.

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

I can't understand why it wouldn't work when the breakpoint isn't on. Clearly it does work, because everything is fine with the breakpoint on, but then when it's off the result I get output to the console is:

1     
2 
3 undefined 
Quiz Selection 
like image 756
Web Develop Wolf Avatar asked Feb 13 '17 09:02

Web Develop Wolf


People also ask

What is the purpose of breakpoints in debugging in JavaScript?

In the debugger window, you can set breakpoints in the JavaScript code. At each breakpoint, JavaScript will stop executing, and let you examine JavaScript values. After examining values, you can resume the execution of code (typically with a play button).

How do breakpoints work in debugging?

Breakpoints are one of the most important debugging techniques in your developer's toolbox. You set breakpoints wherever you want to pause debugger execution. For example, you may want to see the state of code variables or look at the call stack at a certain breakpoint.

What happens when a breakpoint is reached when the debugger is enabled?

If a breakpoint is reached, or a signal not related to stepping occurs before count steps, stepping stops right away. Continue to the next source line in the current (innermost) stack frame. This is similar to step , but function calls that appear within the line of code are executed without stopping.


1 Answers

You have a race condition.

The act of hitting a breakpoint makes your code wait for the async JSON load to complete. Without the breakpoint, the code trying to read the JSON is executing before the JSON has actually loaded.

See How do I return the response from an asynchronous call? for how to fix this issue.

like image 147
Jamiec Avatar answered Jan 03 '23 15:01

Jamiec