Почему выводиться 10 раз 10?

Question

[darktowerk56c]

for (count = 0; count < 10; count++) {
    setTimeout(() => console.log(count), 1000)
}

Comments

[origami1024]

Потому, что в таком виде все делается в глобальной переменной count

[darktowerk56c]

origami1024, Спасибо.

[origami1024]

Нашел самый модный вариант, как переписать твой пример, чтобы он работал (даже без let):

for (count = 0; count < 10; count++) {
  setTimeout(console.log, 1000, count);
}

Answer 1

[vadimMalovaniy]

потому что замыкание. Линк

Comments

[alex]

Нет тут замыкания, в этом то вся и суть проблемы

Answer 2

[Hedy]

В вашем примере значение count передается по ссылке, поэтому через секунду значение этой переменной будет 10.

Вот тут хорошее описание: ссылка

Comments

[WapSter]

Говоря проще цикл выполнился на момент вызова setTimeout

[darktowerk56c]

WapSter, Спасибо.

Answer 3

[Stimulate]

for (let count = 0; count < 10; count++) {
  setTimeout(function() {
    console.log(count)
  }, count*1000);
}

Comments

[origami1024]

вопрос в том, чтобы ты объяснил почему

Answer 4

[Владимир Солнцев]

Таймеры работают асинхронно. Цикл выполняется до того, как срабатывает первый таймер и переменная уже изменена.

А вот если вызывать таймер через стрелочную функцию:
... setTimeout(() => { ...
то в консоль выведется последовательно 1-10. Почему? Потому как стрелочные функции не имеют собственного контекста выполнения, каждый раз, вызываясь, они ориентируются на контекст блока выше, в данном случае самой функции setTimeout, которая уже выполняется в рамках текущих итераций цикла. То есть, в каждой итерации в момент обращения.
Стало немного яснее или еще больше запутал?
Или может я сам неправильно понимаю?))

Comments

[darktowerk56c]

По-моему отлично объяснил ) Спасибо )

[Владимир Солнцев]

Если сложно понять, рекомендую помедитировать над различиями:

for (let count = 0; count < 10; count++) {
  setTimeout((function() {
    console.log(count)
  }).bind(this), count*1000);
};

...

for (let count = 0; count < 10; count++) {
  setTimeout(() {
    console.log(count)
  }, count*1000);
}

И ваш вариант

for (let count = 0; count < 10; count++) {
  setTimeout(function() {
    console.log(count)
  }, count*1000);
}

Почитайте теорию по bind и стрелочным, замыканиям, асинхронности - если считаете, что вам это нужно.

[Владимир Солнцев]

darktowerk56c, На здоровье)

[origami1024]

А вот если вызывать таймер через стрелочную функцию:
... setTimeout(() => { ... то в консоль выведется последовательно 1-10. ...

В примере ОПа и так стрелочная функция в setTimeout

[Владимир Солнцев]

origami1024, пример был другой на время ответа.

[origami1024]

Владимир Солнцев, в истории изменений нет других версий, был именно этот пример

[Владимир Солнцев]

origami1024, Ну видимо я его придумал, а автор вопроса отметил решением и поблагодарил за неадекватное решение вопроса.
Видимо, мы оба нездоровы, раз в истории изменений нет других версий. И люди, которые отвечали выше, видимо, тоже. Завтра на пару пойдем к психиатру проверимся. Хорошо, что есть история других версий.

[origami1024]

Владимир Солнцев, да ну была же стрелочная функция у него с начала вопроса, он не менял ничего, все отвечали на эту версию, у него не рабочий вариант со стрелочной функцией

[Владимир Солнцев]

origami1024, предположим, я действительно ошибся, тогда вопрос, почему автор не написал замечание? Я точно помню, что функция в таймере была анонимной, на счет того, как объявлялась перменная count - не уверен уже. В любом случае, ясность может внести только автор вопроса.
История изменений говорит, что ты прав, но я ведь не могу игнорировать собственную память и здравый смысл)

[origami1024]

Владимир Солнцев, автор все ответы отметил просто, ему помогло, но неизвестно чем именно.
Анонимная/стрелочная функция сама по себе тут роли не играет, твой пример работает, потому что у тебя есть слово let.
Оно делает переменную count локальной для блока кода цикла.
По завершении итерации(!) цикла count попадает в closure функции setTimeout как отдельная (уже новая) локальная переменная, со значением которое было скопировано в момент вызова этой функции.

[Владимир Солнцев]

origami1024, проверил, да - все так. Я ошибся, спасибо)