Как понять такое поведение участка кода на js?

Question

[Максим Иванов]

Мда, после такого считаю себя нубом.

1) Что выведется в консоль? Как добиться правильного вывода в консоль, не убирая setTimeout?

for (var i = 0; i < 10; i++) {
  setTimeout(function () {
    console.log(i); // ?
  }, 0);
}

Думал, что раз у setTimeout нет задержки, он будет сразу выполнять код внутри себя, оказывает нет
Вставлял такой код несколько раз в консоль, в итоге вывод:



Как объясняется такое поведение?

Comments

[Nwton]

У timeout и setinterval не может быть 0 задержки. Если не ошибаюсь, минимум 5-10мс. Это ограничение было введено специально.

Answer 1

[Matvey Safronov]

for (var i = 0; i < 10; i++) {
  setTimeout((function (i) {
    console.log(i); // ?
  })(i), 0);

Comments

[Максим Иванов]

а почему он изначально не заходил в функцию setTimeout? i ведь глобальная

Answer 2

[Сергей]

цикл пробегается раньше чем отрабатывает timeout
/* написаное ниже - ошибочно */
JS однопоточен, поэтому setTimeout фактически выбрасывает код в конец текущего обработчика, когда i == 10
/* написаное выше - ошибочно */

можно прибегнуть к ES6 и использовать оператор let

for (let i = 0; i < 10; i++) {
  setTimeout(function () {
    console.log(i); // ?
  }, 0);
}

таким образом мы сократили область видимости переменной i до блока внутри цикла
а в случае с var переменная была общая и setTimeout выводил только ее конечное значение

UPD: дока для ознакомления тут https://learn.javascript.ru/let-const

UPD2: По поводу однопоточности я ошибся (в том что это причина).
Исправляюсь )) как оказалось. setTimeout(func,0) и setTimeout(func,4) выполнятся одновременно.
По крайней мере в хроме. минимальный порог значения таймаута в разных браузерах может отличаться, но он больше 0мс. В хром это 4мс. обусловлено это тем, что многие используют setTimeout для асинхронности и страница где несколько setTimeout(func,0) сильно нагрузит процессор. По крайней мере базовой причиной появляения минимальной задержки называют это.

Comments

[romy4]

неправильно. дело не в однопоточности

[Сергей]

romy4: уже понял, щас исправлюсь ))

[romy4]

Сергей: минимальный "порог" на сколько я помню 10мс

[Максим Иванов]

Вообщем, как я понял, и пишет Илья Кантор, все дело в том, что минимальная задержка по стандартам не 0, а 4мс и нет разницы от этого диапазона

Если не хотим использовать замыкания, используем let, тогда переменная будет жестко зафиксирована для той самой функции как глобальное значение блока

Answer 3

[Finesse]

Чтобы добиться правильного вывода, нужно создать замыкание. Например, так:

for (var i = 0; i < 10; i++) {
  // Значение переменной i копируется в переменную value, которая при каждом из 10 вызовов отдельная
  (function(value) {
    setTimeout(function () {
      console.log(value);
    }, 0);
  })(i);
}

Answer 4

[DTX]

https://learn.javascript.ru/settimeout-setinterval

or (let i = 0; i < 10; i++) {
  setTimeout(function () {
    console.log(i); // ?
  }, 0);
}

Answer 5

[Dima Zherebko]

setTimeout(func,time) - добавит указанную функцию через time милисекунд в очередь выполнения функций.
Т.е фукнция выполнится через time мс только в том случае если в очереди нету никаких задач , типа рендеринга страниц и тд .
+
вот такой блок кода будет в цикле добавлять с очередь выполения функци которым передали значение индекса цикла.
```
for (var i = 0; i < 10; i++) {
setTimeout(function (index) {
console.log(index);
} ,0,i);
```