await/async seem to behave differently on Chrome and Safari on Mac, compared to Chrome on Windows and Linux.
<select id="dbgselect">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<script>
async function dbg(type) {
console.log(`A [${type}]`);
await dbg2(type);
console.log(`B [${type}]`);
}
async function dbg2(type) {
console.log(`C [${type}]`);
}
document.getElementById("dbgselect").oninput = () => { dbg("input"); };
document.getElementById("dbgselect").onchange = () => { dbg("change"); };
</script>
When making a selection in the dropdown, the output on Linux/Windows (on Chrome) is:
A [input]
C [input]
A [change]
C [change]
B [input]
B [change]
The output on Mac (on both Chrome and Safari):
A [input]
C [input]
B [input]
A [change]
C [change]
B [change]
HOWEVER - if I add this at the bottom, to invoke dbg outside the context of an event:
setTimeout(() => {
dbg("input");
dbg("change");
}, 0);
Then the result on Mac changes, and becomes the same as on Linux and Windows (i.e. A,C,A,C,B,B instead of A,C,B,A,C,B).
My questions:
Is either of these implementations a bug? (i.e. a violation of some standard).
Is this difference in behavior documented or discussed anywhere? I couldn't find.
setTimeout(() => dbg('input'), 0); setTimeout(() => dbg('change'), 0);would be the relevant one, for two events at the same time. Looks like on windows the "two" events are just one. However, i am not versed enough in the html spec to know, so time to wait for a html guru :)setInterval(() => { cnt++; }, 0), and then loggingcntin the console.log lines. thecntcounter value is the same for both events, on both systems.setIntervalisn't accurate below 4-6ms, and all you notice is, that both event handlers were fired, not, whether they were listed as separate events or not.