1

I hope my title is correct. I was at an interview today and was stumped by a question dealing with the event loop/ single threading. Here is the code:

function longCB(){
    for (var i = 0; i <= 9999; i++){
    console.log(i);
  }
  $('#status').text('hello')
}

$('#status').text('hi')
longCB();

The question was why does the DOM never display 'hi' on the #status div? Being completely stumped the interviewer explained it was because of single threading in javascript and explained that just by adding a setTimeout to longCB() even if it was set to 0 would make it work. After reviewing the event loop/ event que and call stacks I am still completely stumped why this doesn't work? Shouldn't the line

$('#status').text('hi')

be done before even calling longCB()? What am I missing? Thank you in advanced.

user1842315
  • 307
  • 3
  • 13

1 Answers1

1

That's because the single thread is also shared by the browser's rendering engine. As long as JS is running synchronously, the page on the screen doesn't get updated. Why? Well, say you had this code:

elem.style.color = 'red';
elem.style.opacity = '1';
elem.textContent = 'Hello';

You wouldn't want the element to show the old text in red, then make it more opaque and then change the text to Hello. You just want the text to immediately change and be red and opaque. This is one reason why the rendering is done only after all JS is run. The other reason has to do with performance. Rendering takes time!

$('#status').text('hi')
longCB();

You are not wrong when you say that the text is set to 'hi' before even calling longCB(), but since the thread is still running JS, the page won't get redrawn just yet. Using setTimeout simply adds the method call on a stack of things to do at some point in the future, and the browser is guaranteed to render between the end of a synchronous script and handling events or timeouts.

Domino
  • 6,314
  • 1
  • 32
  • 58
  • Wow thank you very much. I really appreciate it. I am going to research it more but could you possibly explain what a thread is exactly? Is a single thread a block scope per say? – user1842315 Apr 20 '17 at 01:29
  • 1
    I just watched Philip Roberts keynote on event loop. https://www.youtube.com/watch?v=8aGhZQkoFbQ I realize now there is a render que which can only run when the call stack is clear. Since longCB() is on the call stack the browser never renders #status with the text 'hi'. Thank you very much – user1842315 Apr 20 '17 at 02:32
  • A thread or process in a programming language usually means a single "cursor" that is moving through the code, as opposed to multiple pieces of code running simultaneously. Don't get confused, thread can also refer to an OS managed block of memory and processor time. Chrome, for example, has a different process for each tab, as can be seen in the task manager. While processors can have multiple cores which are sometimes called threads. It's a very loose term come to think of it. – Domino Apr 20 '17 at 19:52