Understanding Javascript Event loop and code execution

Question

I have a problem understanding the Javascript event loop and code execution.

For example, I have a very basic jQuery function like:

$(document).ready(function()
{
$('#button').on('click', function() {
alert("This is a test");
});

Can somebody please explain to me, when the jQuery function gets called?
What happens if the page is loaded, is the .ready() function put on the message queue and gets passed to the event loop when the callback for the function is fired? (In this case, the callback would be the finish loaded page?)

See developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/EventLoop: "In web browsers, messages are added any time an event occurs and there is an event listener attached to it. If there is no listener, the event is lost. So a click on an element with a click event handler will add a message--likewise with any other event." The ready callback is just another event handler. — Felix Kling
– Felix Kling, Commented Aug 16, 2014 at 15:11
What message queue? the callback function as you said is a function. Why'd you think it's "loaded page"?? — T J
– T J, Commented Aug 16, 2014 at 15:12
Awesome video explaining the event the stack, the event loop etc youtube.com/watch?v=8aGhZQkoFbQ — Ronan Quillevere
– Ronan Quillevere, Commented Nov 8, 2016 at 15:57

T J · Accepted Answer · 2014-08-16 15:05:36Z

2

The .ready() function gets called when DOM tree has been constructed from your HTML and that's why it is called DOM ready event. After this, the anonymous function above which has the alert gets bound to click event of the element with the ID button . This means that whenever this target is clicked (which has ID button) this function will be called, and hence your alert will show. I hope that helps !

edited Aug 16, 2014 at 15:05

T J

43.2k13 gold badges87 silver badges142 bronze badges

answered Aug 16, 2014 at 14:38

Nikhil Khullar

7336 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

AndyB Over a year ago

thanks for the reply, but i think thats a little bit to generic. I want to know, how the eventloop works in this case. How does call stack, message queue and event loop work together in this case?

AndyB Over a year ago

it is my understanding, that every function in js, which contains a callback, is first put on a Call Stack, and then, when their callback is fired, the function gets executed. Meanwhile the functions eventhandler is stored in a message queue, waiting for its event to be triggered. The event loop loops through the message queue, executing all triggered events waiting in the queue.

Collectives™ on Stack Overflow

Understanding Javascript Event loop and code execution

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related