Run time execution process of the function

I was wondering how will be the below code gets executed in runtime. I am aware that events are handled by the browser API and hence gets popped out from the call stack. And then the callbacks are registered in the Queue by the API. And then these messages gets executed once the stack is empty.

But happens when there are multiple functions in the onclick callback function. Having both sequential and Async functions in it. Then will they again push back to the Browser API from the Queue to Call stack then again to Browser API?

How the whole below code gets executed?

$('#test').on(click, function() {
   console.log('start');

   //modifies the dom like add div in the html
   modifyDom();

   //http ajax call
   someAjaxCall();

   while(let i < 5) {
      console.log(i);
      i++
   }

   setTimeout(function(){ console.log('Zero Delay'); },0);


});

from Run time execution process of the function