Event Loop and Source Panels

Event Queue Model

Model an event queue without timers.

event-queue An event loop repeatedly takes the next queued task and runs it. This deterministic model keeps the queue visible without using real timers.

Event Queue Model

extra
event_queue_model.js
Replay: real traced execution (multi-file project)
const extra = "audit";
const queue = ["read", extra, "write"];
const log = [];

while (queue.length > 0) {
  const task = queue.shift();
  log.push("run:" + task);
}

console.log("extra=" + extra);
console.log("log=" + log.join(","));

const extra = "sync";
const queue = ["read", extra, "write"];
const log = [];

while (queue.length > 0) {
  const task = queue.shift();
  log.push("run:" + task);
}

console.log("extra=" + extra);
console.log("log=" + log.join(","));

const extra = "render";
const queue = ["read", extra, "write"];
const log = [];

while (queue.length > 0) {
  const task = queue.shift();
  log.push("run:" + task);
}

console.log("extra=" + extra);
console.log("log=" + log.join(","));

  1. extra ← audit, queue ← read,audit,write

    1const extra→ audit = "audit"; //@extra="sync", "render"2const queue→ read,audit,write = ["read", extraaudit, "write"];3const log = [];

  2. queue ← audit,write, task ← read

    pass 1 of 3
    2const queue = ["read", extra, "write"];3const log = [];45while (queue.length3 > 0) {6  const task→ read = queue→ audit,write.shift();7  log.push("run:" + taskread);8}
    All 3 passes — pass 1 is the card above
    passqueue.lengthqueuetask
    13read,audit,write → audit,writeread
    22audit,write → writeaudit
    31write → (empty)write

  3. console.log("extra=" + extra);

    7  log.push("run:" + task);8}910console.log("extra=" + extraaudit);11console.log("log=" + log.join(","));
    outputextra=audit
log=run:read,run:audit,run:write

  1. extra ← sync, queue ← read,sync,write

    1const extra→ sync = "sync";2const queue→ read,sync,write = ["read", extrasync, "write"];3const log = [];

  2. queue ← sync,write, task ← read

    pass 1 of 3
    2const queue = ["read", extra, "write"];3const log = [];45while (queue.length3 > 0) {6  const task→ read = queue→ sync,write.shift();7  log.push("run:" + taskread);8}
    All 3 passes — pass 1 is the card above
    passqueue.lengthqueuetask
    13read,sync,write → sync,writeread
    22sync,write → writesync
    31write → (empty)write

  3. console.log("extra=" + extra);

    7  log.push("run:" + task);8}910console.log("extra=" + extrasync);11console.log("log=" + log.join(","));
    outputextra=sync
log=run:read,run:sync,run:write

  1. extra ← render, queue ← read,render,write

    1const extra→ render = "render";2const queue→ read,render,write = ["read", extrarender, "write"];3const log = [];

  2. queue ← render,write, task ← read

    pass 1 of 3
    2const queue = ["read", extra, "write"];3const log = [];45while (queue.length3 > 0) {6  const task→ read = queue→ render,write.shift();7  log.push("run:" + taskread);8}
    All 3 passes — pass 1 is the card above
    passqueue.lengthqueuetask
    13read,render,write → render,writeread
    22render,write → writerender
    31write → (empty)write

  3. console.log("extra=" + extra);

    7  log.push("run:" + task);8}910console.log("extra=" + extrarender);11console.log("log=" + log.join(","));
    outputextra=render
log=run:read,run:render,run:write