<html>
<head>
<title>Example 2</title>
<script>

var event_queue = [];
var the_event = null;

// CENTRAL_HANDLER:
// called by onload and setTimeout
function central_handler() {
    if (!(event_queue.length > 0)) {
      return;
    }
    the_event = event_queue.shift();

    // call event
    window[the_event.name]();

    // only loop until the stack is empty
    if (event_queue.length > 0) {
       setTimeout(function () {
                    central_handler();
                  },
                  the_event.delay);
    }
}

//
// called by body onload
//
function init() {
 process(start,"body");
}

//
// process the next item in the essence
//
function process(obj,target_id) {
 var target_element = document.getElementById(target_id);

 if (obj["type"] == "replace_html") {
  document.getElementById(obj["id"]).innerHTML = obj["content"];
 }

 if (Array.isArray(obj)) {
  for (var x of obj) {
    process(x,target_id);
  }
 }
}

//
// The essence, or configuration
// AKA The application definition
// (a kind of option-oriented programming)
//

var start = main_page();

function main_page() {

  var main_page = {
   "type":"replace_html",
   "id":"root",
   "content":"After"
  };

  return main_page;
}

</script>

</head>

<body onload="event_queue.push({'name':'init','delay':2000}); central_handler();">

<div id="root">
Before
</div>

</body>

</html>