Javascript - 了解setTimeout

Question

我在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> 

当我们点击的功能，它追加输入到按钮元素的文本体。我明白这是发生，因为第一父（体）事件被触发，并在一个时钟嘀哒，因为它是在事件队列推后执行子（输入）事件。

我现在尝试下面的代码：

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) 
} 

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

Answer 1

的点击是首次触发最里面的元素，然后向上冒泡。

因此，在你的第一个例子中输入点击触发第一，但由于setTimeout它不是立即执行，而不是将其添加到队列中，被触发并执行这样的身体活动。

现在第二种情况是自明的，输入被触发第一，并将其​​添加执行到由于setTimeout的队列中，但然后当被触发文档事件它同样的，现在执行队列因此输入首先，然后文档执行事件，

这是因为JavaScript是单线程的，因此一旦触发setTimeout它将函数推入队列并等待超时并执行它。

参考文献W3.org Link