Замыкания внутри циклов javascript

Question

[Z_Coder]

На jsgarden засек след. пример:

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

Данный код выводит 10 по 10 раз. Для меня данный результат абсолютно не очевиден. jsgarden аргументирует это тем, что:

Анонимная функция сохраняет лишь ссылку на i, и когда будет вызвана функция console.log, цикл for уже закончит свою работу — и поэтому в переменной i будет покоиться значение 10.

1. Если как они утверждают цикл будет закончен до того как будет вызвана console.log(i) то почему результат выводится 10 раз?
2. Как цикл может закончится до вызова console.log(i), если условие цикла является true 10 раз и такое же количество раз должен отрабатываться весь код внутри цикла?

Объясните пожалуйста подробнее как работает эта хитрая крупица кода.

Answer 1

[Yuri Shikanov]

1. Если как они утверждают цикл будет закончен до того как будет вызвана console.log(i) то почему результат выводится 10 раз?

У вас же timeout используется, т.е. 10 раз внутри цикла будет запущен таймер, пока первый из таймеров закончится цикл уже пройдет все 10 итераций и соотв i будет иметь значение 10.

Answer 2

[Konstantin]

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

Comments

[anatoliy8493]

крутое решение)

[Konstantin]

anatoliy8493, а вот это посовременнее )))

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

Answer 3

[aen]

1. 10 раз запустится отложенный console.log(i);, который лежит внутри анонимной функции, которая создается каждый раз.

Прочитайте статью habrahabr.ru/company/tradingview/blog/178261/. Она ответит на ваши вопросы.

Answer 4

[Opaspap]

Сначала цикл будет закончен, следовательно i выставлено в 10, а потом через 1 секунду вызовется 10 раз функция из замыкания в setTimeout (почти сразу, с разницей ~4мс), после того как последняя из этих функций выйдет область видимости, в которой находится цикл будет отдана на съедение уборщику мусора, до того все ссылки на переменные заданные в области видимости цикла будут считаться нужными.

Обход обычно делается примерно так:

for(var i = 0; i < 10; i++) {setTimeout(LogMe(i), //получим функцию
                                     1000*(i+1));} //видимо хочется не всё сразу через 1 секунду выполнить,
                                     // а по одному разу за 1 секунду (последний console.log() через 10 секунд)

function LogMe(i){ //т.к. i объявлена здесь (в аргументе это всё равно что объявление var), 
                            //то она больше не будет ссылкой на i из цикла
                           //эта области видимости отправится  к мусорщику сразу после выполнения следующей функции
return function() {     //вернем новую функцию со своей областью видимости.
        console.log(i);  
    };
 }

Всё вместе называется асинхронное выполнение.

Answer 5

[Али Алиев]

Тут все дело в замыканиях :)
Что такое замыкания? Замыкания это функции, внутри которых создаются ссылки на внешние переменные ( то есть переменные, за пределами блока функции - замыкания ). Обратите внимания на слово ссылка, каждый раз как происходит итерация цикла, значения в i меняется тоже:

> var tmp = {};
undefined
> for(var i=0; i < 10; i++) {
... tmp[i] = function() { return i; };
... }
[Function]
> tmp[0]()
10
> tmp[1]()
10
> tmp[2]()
10
> ...

Comments

[Itvanya]

Али Алиев корявый же пример. При tmp[i] = function() { return i; }; , объект под каждый ключ i будет записывается функция. Десятку можно получить только тогда, когда сделать отложенный вызов, используя таймаут.

Answer 6

[asArtem]

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

равносильно:

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