Event Loop and Source Panels

Promise Then Chain

Trace ordered Promise callbacks as a single-thread event-loop sequence.

promise-chain A Promise chain runs callbacks later, but still in a deterministic order. Replay shows each callback updating the same source panel.

Promise Then Chain

base
promise_then_chain.js
Replay: real traced execution (multi-file project)
const base = 6;
let first = 0;
let second = 0;

function addStep(value) {
  first = value + 4;
  return first;
}

function finishStep(value) {
  second = value * 2;
  console.log("base=" + base);
  console.log("first=" + first);
  console.log("second=" + second);
}

Promise.resolve(base)
  .then(addStep)
  .then(finishStep);

const base = 3;
let first = 0;
let second = 0;

function addStep(value) {
  first = value + 4;
  return first;
}

function finishStep(value) {
  second = value * 2;
  console.log("base=" + base);
  console.log("first=" + first);
  console.log("second=" + second);
}

Promise.resolve(base)
  .then(addStep)
  .then(finishStep);

const base = 9;
let first = 0;
let second = 0;

function addStep(value) {
  first = value + 4;
  return first;
}

function finishStep(value) {
  second = value * 2;
  console.log("base=" + base);
  console.log("first=" + first);
  console.log("second=" + second);
}

Promise.resolve(base)
  .then(addStep)
  .then(finishStep);

  1. base ← 6, first ← 0, second ← 0

    1const base→ 6 = 6; //@base=3, 92let first→ 0 = 0;3let second→ 0 = 0;45function addStep(value) {6  first = value + 4;7  return first;8}910function finishStep(value) {11  second = value * 2;12  console.log("base=" + base);13  console.log("first=" + first);14  console.log("second=" + second);15}1617Promise.resolve(base6)18  .then(addStepfunction addStep(value) {
    console.log("@@TRACE|promise_then_chain.js|-1|ENTER|3.16-5.26-8.2:\n\nfunction addStep(value) {|" + ("5.18-5.23:value:" + String(value).length + ":" + String(value)) + "@@END");
    console.log("@@TRACE|promise_then_chain.js|-1|BEFORE|5.26-6.21:\n  first = value + 4;|@@END");
    first = value + 4;
    console.log("@@TRACE|promise_then_chain.js|-1|AFTER|5.26-6.21:\n  first = value + 4;|" + ("5.26-6.8:\n  first:" + String(first).length + ":" + String(first) + ", " + "6.10-6.16: value:" + String(value).length + ":" + String(value)) + "@@END");
    console.log("@@TRACE|promise_then_chain.js|-1|BEFORE|6.21-7.16:\n  return first;|" + ("7.9-7.15: first:" + String(first).length + ":" + String(first)) + "@@END");
    console.log("@@TRACE|promise_then_chain.js|-1|LEAVE|3.16-5.26-8.2:\n\nfunction addStep(value) {|@@END");
    return first;
})19  .then(finishStepfunction finishStep(value) {
    console.log("@@TRACE|promise_then_chain.js|-1|ENTER|8.2-10.29-15.2:\n\nfunction finishStep(value) {|" + ("10.21-10.26:value:" + String(value).length + ":" + String(value)) + "@@END");
    console.log("@@TRACE|promise_then_chain.js|-1|BEFORE|10.29-11.22:\n  second = value * 2;|@@END");
    second = value * 2;
    console.log("@@TRACE|promise_then_chain.js|-1|AFTER|10.29-11.22:\n  second = value * 2;|" + ("10.29-11.9:\n  second:" + String(second).length + ":" + String(second) + ", " + "11.11-11.17: value:" + String(value).length + ":" + String(value)) + "@@END");
    console.log("@@TRACE|promise_then_chain.js|-1|BEFORE|11.22-12.31:\n  console.log(\"base=\" + base);|" + ("12.24-12.29: base:" + String(base).length + ":" + String(base)) + "@@END");
    {
        const __stdout = String("base=" + base);
        console.log("@@TRACE|promise_then_chain.js|-1|STDOUT|11.22-12.31:\n  console.log(\"base=\" + base);|" + __stdout.length + ":" + __stdout + "@@END");
    }
    ;
    console.log("@@TRACE|promise_then_chain.js|-1|AFTER|11.22-12.31:\n  console.log(\"base=\" + base);|" + ("12.24-12.29: base:" + String(base).length + ":" + String(base)) + "@@END");
    console.log("@@TRACE|promise_then_chain.js|-1|BEFORE|12.31-13.33:\n  console.log(\"first=\" + first);|" + ("13.25-13.31: first:" + String(first).length + ":" + String(first)) + "@@END");
    {
        const __stdout = String("first=" + first);
        console.log("@@TRACE|promise_then_chain.js|-1|STDOUT|12.31-13.33:\n  console.log(\"first=\" + first);|" + __stdout.length + ":" + __stdout + "@@END");
    }
    ;
    console.log("@@TRACE|promise_then_chain.js|-1|AFTER|12.31-13.33:\n  console.log(\"first=\" + first);|" + ("13.25-13.31: first:" + String(first).length + ":" + String(first)) + "@@END");
    console.log("@@TRACE|promise_then_chain.js|-1|BEFORE|13.33-14.35:\n  console.log(\"second=\" + second);|" + ("14.26-14.33: second:" + String(second).length + ":" + String(second)) + "@@END");
    {
        const __stdout = String("second=" + second);
        console.log("@@TRACE|promise_then_chain.js|-1|STDOUT|13.33-14.35:\n  console.log(\"second=\" + second);|" + __stdout.length + ":" + __stdout + "@@END");
    }
    ;
    console.log("@@TRACE|promise_then_chain.js|-1|AFTER|13.33-14.35:\n  console.log(\"second=\" + second);|" + ("14.26-14.33: second:" + String(second).length + ":" + String(second)) + "@@END");
});

  2. first ← 10, value ← 6

    2let first = 0;3let second = 0;45function addStep(value6) {6  first = value→ 6 + 4;7  return first10;8}

  3. second ← 20, value ← 10

    7  return first;8}910function finishStep(value10) {11  second = value→ 10 * 2;12  console.log("base=" + base6);13  console.log("first=" + first10);14  console.log("second=" + second20);15}
    outputbase=6
first=10
second=20

  1. base ← 3, first ← 0, second ← 0

    1const base→ 3 = 3;2let first→ 0 = 0;3let second→ 0 = 0;45function addStep(value) {6  first = value + 4;7  return first;8}910function finishStep(value) {11  second = value * 2;12  console.log("base=" + base);13  console.log("first=" + first);14  console.log("second=" + second);15}1617Promise.resolve(base3)18  .then(addStepfunction addStep(value) {
    console.log("@@TRACE|promise_then_chain.js|-1|ENTER|3.16-5.26-8.2:\n\nfunction addStep(value) {|" + ("5.18-5.23:value:" + String(value).length + ":" + String(value)) + "@@END");
    console.log("@@TRACE|promise_then_chain.js|-1|BEFORE|5.26-6.21:\n  first = value + 4;|@@END");
    first = value + 4;
    console.log("@@TRACE|promise_then_chain.js|-1|AFTER|5.26-6.21:\n  first = value + 4;|" + ("5.26-6.8:\n  first:" + String(first).length + ":" + String(first) + ", " + "6.10-6.16: value:" + String(value).length + ":" + String(value)) + "@@END");
    console.log("@@TRACE|promise_then_chain.js|-1|BEFORE|6.21-7.16:\n  return first;|" + ("7.9-7.15: first:" + String(first).length + ":" + String(first)) + "@@END");
    console.log("@@TRACE|promise_then_chain.js|-1|LEAVE|3.16-5.26-8.2:\n\nfunction addStep(value) {|@@END");
    return first;
})19  .then(finishStepfunction finishStep(value) {
    console.log("@@TRACE|promise_then_chain.js|-1|ENTER|8.2-10.29-15.2:\n\nfunction finishStep(value) {|" + ("10.21-10.26:value:" + String(value).length + ":" + String(value)) + "@@END");
    console.log("@@TRACE|promise_then_chain.js|-1|BEFORE|10.29-11.22:\n  second = value * 2;|@@END");
    second = value * 2;
    console.log("@@TRACE|promise_then_chain.js|-1|AFTER|10.29-11.22:\n  second = value * 2;|" + ("10.29-11.9:\n  second:" + String(second).length + ":" + String(second) + ", " + "11.11-11.17: value:" + String(value).length + ":" + String(value)) + "@@END");
    console.log("@@TRACE|promise_then_chain.js|-1|BEFORE|11.22-12.31:\n  console.log(\"base=\" + base);|" + ("12.24-12.29: base:" + String(base).length + ":" + String(base)) + "@@END");
    {
        const __stdout = String("base=" + base);
        console.log("@@TRACE|promise_then_chain.js|-1|STDOUT|11.22-12.31:\n  console.log(\"base=\" + base);|" + __stdout.length + ":" + __stdout + "@@END");
    }
    ;
    console.log("@@TRACE|promise_then_chain.js|-1|AFTER|11.22-12.31:\n  console.log(\"base=\" + base);|" + ("12.24-12.29: base:" + String(base).length + ":" + String(base)) + "@@END");
    console.log("@@TRACE|promise_then_chain.js|-1|BEFORE|12.31-13.33:\n  console.log(\"first=\" + first);|" + ("13.25-13.31: first:" + String(first).length + ":" + String(first)) + "@@END");
    {
        const __stdout = String("first=" + first);
        console.log("@@TRACE|promise_then_chain.js|-1|STDOUT|12.31-13.33:\n  console.log(\"first=\" + first);|" + __stdout.length + ":" + __stdout + "@@END");
    }
    ;
    console.log("@@TRACE|promise_then_chain.js|-1|AFTER|12.31-13.33:\n  console.log(\"first=\" + first);|" + ("13.25-13.31: first:" + String(first).length + ":" + String(first)) + "@@END");
    console.log("@@TRACE|promise_then_chain.js|-1|BEFORE|13.33-14.35:\n  console.log(\"second=\" + second);|" + ("14.26-14.33: second:" + String(second).length + ":" + String(second)) + "@@END");
    {
        const __stdout = String("second=" + second);
        console.log("@@TRACE|promise_then_chain.js|-1|STDOUT|13.33-14.35:\n  console.log(\"second=\" + second);|" + __stdout.length + ":" + __stdout + "@@END");
    }
    ;
    console.log("@@TRACE|promise_then_chain.js|-1|AFTER|13.33-14.35:\n  console.log(\"second=\" + second);|" + ("14.26-14.33: second:" + String(second).length + ":" + String(second)) + "@@END");
});

  2. first ← 7, value ← 3

    2let first = 0;3let second = 0;45function addStep(value3) {6  first = value→ 3 + 4;7  return first7;8}

  3. second ← 14, value ← 7

    7  return first;8}910function finishStep(value7) {11  second = value→ 7 * 2;12  console.log("base=" + base3);13  console.log("first=" + first7);14  console.log("second=" + second14);15}
    outputbase=3
first=7
second=14

  1. base ← 9, first ← 0, second ← 0

    1const base→ 9 = 9;2let first→ 0 = 0;3let second→ 0 = 0;45function addStep(value) {6  first = value + 4;7  return first;8}910function finishStep(value) {11  second = value * 2;12  console.log("base=" + base);13  console.log("first=" + first);14  console.log("second=" + second);15}1617Promise.resolve(base9)18  .then(addStepfunction addStep(value) {
    console.log("@@TRACE|promise_then_chain.js|-1|ENTER|3.16-5.26-8.2:\n\nfunction addStep(value) {|" + ("5.18-5.23:value:" + String(value).length + ":" + String(value)) + "@@END");
    console.log("@@TRACE|promise_then_chain.js|-1|BEFORE|5.26-6.21:\n  first = value + 4;|@@END");
    first = value + 4;
    console.log("@@TRACE|promise_then_chain.js|-1|AFTER|5.26-6.21:\n  first = value + 4;|" + ("5.26-6.8:\n  first:" + String(first).length + ":" + String(first) + ", " + "6.10-6.16: value:" + String(value).length + ":" + String(value)) + "@@END");
    console.log("@@TRACE|promise_then_chain.js|-1|BEFORE|6.21-7.16:\n  return first;|" + ("7.9-7.15: first:" + String(first).length + ":" + String(first)) + "@@END");
    console.log("@@TRACE|promise_then_chain.js|-1|LEAVE|3.16-5.26-8.2:\n\nfunction addStep(value) {|@@END");
    return first;
})19  .then(finishStepfunction finishStep(value) {
    console.log("@@TRACE|promise_then_chain.js|-1|ENTER|8.2-10.29-15.2:\n\nfunction finishStep(value) {|" + ("10.21-10.26:value:" + String(value).length + ":" + String(value)) + "@@END");
    console.log("@@TRACE|promise_then_chain.js|-1|BEFORE|10.29-11.22:\n  second = value * 2;|@@END");
    second = value * 2;
    console.log("@@TRACE|promise_then_chain.js|-1|AFTER|10.29-11.22:\n  second = value * 2;|" + ("10.29-11.9:\n  second:" + String(second).length + ":" + String(second) + ", " + "11.11-11.17: value:" + String(value).length + ":" + String(value)) + "@@END");
    console.log("@@TRACE|promise_then_chain.js|-1|BEFORE|11.22-12.31:\n  console.log(\"base=\" + base);|" + ("12.24-12.29: base:" + String(base).length + ":" + String(base)) + "@@END");
    {
        const __stdout = String("base=" + base);
        console.log("@@TRACE|promise_then_chain.js|-1|STDOUT|11.22-12.31:\n  console.log(\"base=\" + base);|" + __stdout.length + ":" + __stdout + "@@END");
    }
    ;
    console.log("@@TRACE|promise_then_chain.js|-1|AFTER|11.22-12.31:\n  console.log(\"base=\" + base);|" + ("12.24-12.29: base:" + String(base).length + ":" + String(base)) + "@@END");
    console.log("@@TRACE|promise_then_chain.js|-1|BEFORE|12.31-13.33:\n  console.log(\"first=\" + first);|" + ("13.25-13.31: first:" + String(first).length + ":" + String(first)) + "@@END");
    {
        const __stdout = String("first=" + first);
        console.log("@@TRACE|promise_then_chain.js|-1|STDOUT|12.31-13.33:\n  console.log(\"first=\" + first);|" + __stdout.length + ":" + __stdout + "@@END");
    }
    ;
    console.log("@@TRACE|promise_then_chain.js|-1|AFTER|12.31-13.33:\n  console.log(\"first=\" + first);|" + ("13.25-13.31: first:" + String(first).length + ":" + String(first)) + "@@END");
    console.log("@@TRACE|promise_then_chain.js|-1|BEFORE|13.33-14.35:\n  console.log(\"second=\" + second);|" + ("14.26-14.33: second:" + String(second).length + ":" + String(second)) + "@@END");
    {
        const __stdout = String("second=" + second);
        console.log("@@TRACE|promise_then_chain.js|-1|STDOUT|13.33-14.35:\n  console.log(\"second=\" + second);|" + __stdout.length + ":" + __stdout + "@@END");
    }
    ;
    console.log("@@TRACE|promise_then_chain.js|-1|AFTER|13.33-14.35:\n  console.log(\"second=\" + second);|" + ("14.26-14.33: second:" + String(second).length + ":" + String(second)) + "@@END");
});

  2. first ← 13, value ← 9

    2let first = 0;3let second = 0;45function addStep(value9) {6  first = value→ 9 + 4;7  return first13;8}

  3. second ← 26, value ← 13

    7  return first;8}910function finishStep(value13) {11  second = value→ 13 * 2;12  console.log("base=" + base9);13  console.log("first=" + first13);14  console.log("second=" + second26);15}
    outputbase=9
first=13
second=26