为什么setTimeout（..，0）在Firefox中的浏览器动作之前触发？虫子？

Question

我有一个input.onkeydown处理程序，我检查input.value后setTimeout(..0)。

我希望input.value在setTimeout回调运行时具有新值。

在除Firefox之外的所有浏览器中都可以。在Firefox中，情况并非总是如此。

要检查的代码是：

<input id="input">
<script>
  input.onkeydown = function() {
    setTimeout(() => this.value = this.value.toUpperCase());
  };
</script>

演示：http : //plnkr.co/edit/rZmiHdttSXNdpKkR8YbH?p=preview

由于我将after之后的输入值大写setTimeout(..0)，因此应始终将其大写。但是如前所述，在Firefox中不是。

这是演示视频；前几秒钟演示了该问题：https : //jmp.sh/9XSROQ2

相关规范部分是https://dom.spec.whatwg.org/#concept-event-dispatch。

我没有得到任何东西，或者这是Firefox中的长期错误？

PS如果我添加console.log的setTimeout，我有时会看到旧值。

PPS这个问题的目的是要知道我setTimeout是否正确理解。我熟悉各种大写方式input; 请不要暗示oninput，requestAnimationFrame或者这样的。

Answer 1

我认为这是因为 Firefox 正在处理 setTimeout(fn,0) 同步，也在这里问：Why does Firefox handle setTimeout(fn, 0) synchronous but setTimeout(fn, 1) asynchronous?

Chrome 和 Node 将 0 替换为 1：setTimeout(fn, 0) 和 setTimeout(fn, 1) 之间的区别？ 所以对他们来说总是异步的。如果使用 setTimeout(fn,1) 运行它，它也可以在 FF 中运行。

如果你想让它同步，请使用“oninput”。当“onkeydown”事件消失时，输入值并未完全更新。在 chrome/ff 中使用或不使用超时

input.oninput = function() {
    this.value = this.value.toUpperCase()
};