SetValue does not have effect immediately?

I have this simple CustomWidget.
Why do I see unexpected values for N even though setValue was called just before getValue?

HTML

<div id="mainblock">
  <div id="log_display">NO LOG YET</div>
</div>

JavaScript

"use strict";
let log = [];
function add_log(str) {
  log.push(`[${new Date(Date.now()).toLocaleTimeString()}]${str}`);
  document.querySelector("#log_display").innerText = log.join("\n");
}
getValue("B", (value) => {
  if (value == true) {
    setValue("N", 0);
    add_log(`expecting 0 -> N=${getValue("N")}`);
    setValue("N", 1);
    add_log(`expecting 1 -> N=${getValue("N")}`);
    setValue("N", 2);
    add_log(`expecting 2 -> N=${getValue("N")}`);
  }
});

CSS

#log_display {
  border: solid;
  font-size: 2em;
}

Because of this behavior, we cannot rely on this line 7 in LOOPER v2.1 to have the “Iteration” initialized to 0.
We need make sure the prop “Iteration” is initialized to 0 in the app side before changing the “Begin Loop” prop to Yes.