js event loop

by bhupendra negi

HTML

<script src="https://rawgit.com/eu81273/jsfiddle-console/master/console.js"></script>

JavaScript

//aynchronous js exection logic
function display(data) {
  console.log('hi back from fetch');
}

function printHello() {
  console.log('hello');
}

function blockfor300ms() {
  for (let i = 0; i < 300; i++) {
    // just delaying logic
  }
}
// this sets the printHello function in callback queue { event loop queue }
setTimeout(printHello, 0);

const futureData = fetch('https://api.github.com/users/xiaotian/repos');
// after promise is resolved display function gets added into other queue : Microtask queue { job queue}
futureData.then(display);
// event loop gives prefrence to Microtask queue ( untill  its complete) 
 
blockfor300ms();
// which runs first 
console.log('Me first !');

/* expected output */
// Me first !
// hi back from fetch
// hello

/*actual output*/
// Me first !
// hello
// hi back from fetch