javascript callback with browser dom

prototype is the function template when new is called so that it could be assign to the object’s __proto__.

very good video explaining event loop/callback and browswer.

Some summary:

Typical type of event: User event, XHR event, Timer event.

the whole picture is callstack+eventloop+web api.

call stack is where the code runs

eventloop is where the callback getting queened and executed one by one.

webapi is the browswer provided run time for the timer/asyn callback etc so that when timer is up or async call comes back, it pushes the callback to the queue.

According to Miscov in this video about javascript, the async call back will be pushed to the the event queue once it comes back.

call stack has higher priority than the event loop, which means when there is still code in the callstack, the call backs in the queue will not be executed, so do not put too many stuff into the queue stack. What’s more, the execution of the callstack will block the UI(browser rendering queue), which is bad. So a good practise is to put things in the callback and let it run in the event loop, this way the ui would get a chance to be refreshed between events.

an example of infinite loop

var data; //is initialized to undefined
$http.get(url).success(function(response){
 data=response;
});
while(!data){}; //infinite loop
doSomethingAfterWeGetData();

This is a good example from this video explaining event loop. It becomes an infinite loop since success is registered as a callback which will be executed after the callstack is cleared. so data will not be set and loop will go forever. So the right thing to do is to put the doSomethingAfterWeGetData() method into the callback.

The pseudo code for browser

while(true)
{
  var event = waitforEvent();
  try
  {
    event();
  }catch(){};
  reDrawDom();
}

a more detail version

while(true)
{
  var event = eventQueue.pop();
  if(!event) {contine;}
  try
  {
    var handlers = eventHandlerTable.findAllHandlersFor(event);
    handlers.forEach(function(handler){
     handler.handle(event);
    });
  }catch(){}
  reDrawDom();
}

A detail explaination

Below the covers, javascript has an event queue. Each time a javascript thread of execution finishes, it checks to see if there is another event in the queue to process. If there is, it pulls it off the queue and triggers that event (like a mouse click, for example).

The native code networking that lies under the ajax call will know when the ajax response is done and an event will get added to the javascript event queue. How the native code knows when the ajax call is done depends upon the implementation. It may be implemented with threads or it may also be event driven itself (it doesn’t really matter). The point of the implementation is that when the ajax response is done, some native code will know it’s done and put an event into the JS queue.

If no Javascript is running at the time, the event will be immediately triggered which will run the ajax response handler. If something is running at the time, then the event will get processed when the current javascript thread of execution finishes. There doesn’t need to be any polling by the javascript engine.

Because all outside events go through the event queue and no event is ever triggered while javascript is actually running something else, it stays single threaded.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s