Понимание setTimeout

Я играю с setTimeout в Javascript. Я смущен тем, как это работает. У меня есть следующий код:

<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? В каком порядке они помещаются в очередь событий в этом случае?


javascript dom-events settimeout
person clever_bassi    schedule 07.12.2016    source источник
comment
Они выполняются в том порядке, в котором они были запланированы.   -  person Bergi    schedule 07.12.2016

Ответы (1)


arrow_upward
0
arrow_downward

Щелчок сначала запускается на самом внутреннем элементе, а затем всплывает вверх.

Поэтому в вашем первом примере щелчок по входу запускается первым, но из-за setTimeout он не выполняется немедленно, а добавляется в очередь, и, таким образом, событие в теле запускается и выполняется.

Теперь второй сценарий является пояснительным, сначала запускается ввод, и он добавляет выполнение в очередь из-за setTimeout, но затем, когда запускается событие в документе, он делает то же самое, и теперь выполняется очередь, поэтому сначала выполняется ввод, а затем событие документа,

Это связано с тем, что JavaScript является однопоточным, поэтому после запуска setTimeout он помещает функцию в очередь и ждет тайм-аута и очереди для ее выполнения.

Ссылка для дальнейшего чтения Ссылка на W3.org

person Ajay Narain Mathur    schedule 07.12.2016
comment
Щелчок сначала запускается на самом внутреннем элементе, а затем всплывает вверх. Я думал, что сначала выполняется родительский элемент (который является телом, а не вводом). Мне не хватало этого ключевого знания. Спасибо. - person clever_bassi; 07.12.2016
comment
@clever_bassi: не беспокойся, рад, что смог помочь. - person Ajay Narain Mathur; 07.12.2016