Javascript main loop y setTimeout

jsmainloop.js

//-- A día de hoy, los motores javascript de los navegadores, sólo tienen un thread, lo que significa que no pueden
//-- ejecutar funciones en paralelo.
//-- Cuando utilizamos setTimeout, conceptualmente pensamos que habrá algún tipo de interrupción que temporizará
//-- el ciclo del programa para ejecutar esa taréa cuando toque. 
//-- Pero esto no es así, el "main loop" de javascript, encolará las funciones y las ejecutará una detrás de otra,
//-- priorizando el "orden de las temporizaciones" pero sin respetarlas.
//--
//-- Como ejemplo mostramos el siguiente caso, se lanza una función temporizada para ejecutarse a los 100ms, pero como
//-- la siguiente función a ejecutarse , le toma 400ms, la primera no se ejecutará hasta que termine esta última.

//-- Creamos una función que aproximadamente tarda unos 400ms en ejecutarse
function waste400ms(){
console.log('Invirtiendo 400ms, tiempo real ocupado:');
console.time("iterationTime");
for (i = 0; i < 10000; i++) {
    Math.sqrt(i)*Math.sqrt(i)*Math.sqrt(i)*Math.sqrt(i)*Math.sqrt(i)*Math.sqrt(i)* Math.sqrt(i)*Math.sqrt(i)*Math.sqrt(i)*Math.sqrt(i)*Math.sqrt(i)*Math.sqrt(i);
    for (j = 0; j < 10000; j++) {
    Math.sqrt(j)*Math.sqrt(j)*Math.sqrt(j)*Math.sqrt(j)*Math.sqrt(j)*Math.sqrt(j)*Math.sqrt(j)*Math.sqrt(j)*Math.sqrt(j);
    }
}
console.timeEnd("iterationTime");
}

//-- Lanzamos una función que debería llamarse dentro de 100ms
console.time("timeOutMeter");
setTimeout(function(){
console.log('Me debería haber ejecutado a los 100ms, pero he tardado:');
console.timeEnd("timeOutMeter");
},100);

//-- Llamamos a nuestra función que consumirá 400ms, lo que esperaíamos es que en mitad de la
//-- ejecución apareciera el mensaje del setTimeout, pero como veremos se producirá una vez
//-- acabe la función siguiente

waste400ms();

//-- La función del timeout se ejecutará en este punto, al acabar la función anterior.