Javascript-理解setTimeout

我正在Javascript中使用setTimeout。我对它的工作原理感到困惑。我有以下代码：

<input type="button" value='click'>

<script>
var input = document.getElementsByTagName('input')[0]

input.onclick = function() {
  setTimeout(function() { 
    input.value +=' input'  
  }, 0)
}

document.body.onclick = function() {
  input.value += ' body'
}
</script>

---

这会将文本输入正文附加到按钮元素。当两个超时都设置为0时，如何确定执行顺序？在这种情况下，它们按什么顺序推送到事件队列？谢谢

单击首先在最里面的元素上触发，然后弹出

因此，在第一个示例中，首先触发点击输入，但由于

setTimeout

的原因，它不会立即执行，而是添加到队列中，从而触发并执行body上的事件

第二种情况是解释性的，首先触发输入，然后由于

setTimeout

而将执行添加到队列中，但当触发文档上的事件时，它会执行相同的操作，现在执行队列，因此首先执行输入，然后执行文档事件

这是因为JavaScript是单线程的，因此一旦触发

setTimeout

，它就会将函数推送到队列中，等待超时，然后转过来执行它

---

参考进一步阅读

它们是按照计划的顺序执行的。“首先在最里面的元素上触发单击，然后弹出气泡。”我认为首先执行父元素（即body而不是input）。我错过了这一关键知识。“谢谢你。”聪明的巴西：不用担心，很高兴我能帮上忙。

var input = document.getElementsByTagName('input')[0]

document.body.onclick = function() {
  setTimeout(function() { 
    input.value +=' body'  
  }, 0)
}

input.onclick = function() {
  setTimeout(function() { 
    input.value +=' input'  
  }, 0)
}