setTimeout, pętle i domknięcia

Question

Czytam książkę o JS i aktualnie przerabiam dział zatytułowany tak jak nazwa tego tematu.

Cytat z książki:

Najbardziej kanonicznym przykładem używanym do zilustrowania domknięcia jest zwykła pętla for.

No i taki kodzik :

for(var i = 1; i <=5; ++i)
{
  setTimeout(function timer(){
       console.log(i);
  },i*1000);
}

Komentarz autora:

Standardowym oczekiwaniem względem powyżej przedstawionego fragmentu kodu jest wyświetlenie liczb 1,2...5 co sekundę. Jednak po wykonaniu omawianego kodu otrzymasz pięciokrotnie wyświetloną liczbę 6 w jednosekundowych odstępach 

Ja generalnie rozumiem o co chodzi. Rozumiem, że nie zostaje tutaj tworzona kopia zmiennej "i" przy każdej iteracji. Jednak zastanawia mnie czy mam rację wyczuwając tutaj asynchroniczność? Ja tłumaczę sobie to tak: pętla nie czeka na to aż setTimeout zakończy wykonywanie funcji timer po upływie 1000 milisekund tylko jakby inicjuje wykonywanie jej "w tle" i leci dalej. Czy poprawne jest określenie tego mianem asynchroniczności?

 

W dalszej części mamy autor pisze:

W rzeczywistości nawet gdyby zdefiniować setTimeout(..,0) dla każdej iteracji, wszystkie wywołania zwrotne będą wykonane tuż po zakończeniu działania pętli.

I tego nie rozumiem. Czy to oznacza, że setTimeout z natury zachowuje się w ten sposób, że gdy jest odpalony w pętli to funkcje zwrotne są wywoływane po jej zakończeniu? Czy może jeszcze inaczej? 

Answer 1

Ja tłumaczę sobie to tak: pętla nie czeka na to aż setTimeout zakończy wykonywanie funcji timer po upływie 1000 milisekund tylko jakby inicjuje wykonywanie jej "w tle" i leci dalej. Czy poprawne jest określenie tego mianem asynchroniczności?

Tak

I tego nie rozumiem. Czy to oznacza, że setTimeout z natury zachowuje się w ten sposób, że gdy jest odpalony w pętli to funkcje zwrotne są wywoływane po jej zakończeniu? Czy może jeszcze inaczej? 

Zasadniczo samo wystąpienie pętli nie ma tutaj nic do rzeczy. Kluczowym elementem do zrozumienia setTimeout 0 jest zapoznanie się z event loop.

Najprościej rzecz ujmując, setTimeout 0 wyrzuca kod z kolejki

Comments

Tworzenie domkniec w pętlach: popularne błedy

Answer 2

Funkcja przekazana do `setTimeout` wykonuje się asynchronicznie zawsze - nie zależy to od tego czy jest w pętli czy nie,
asynchroniczny kod wykonuje się dopiero po wykonaniu kodu synchronicznego, najprostszy przykład:
 

console.log('foo')
setTimeout(console.log, 0, 'bar')
console.log('baz')

Wynik: 
foo
baz
bar

Polecam klasyk: https://www.youtube.com/watch?v=8aGhZQkoFbQ

Answer 3

Bardzo dziękuję za odpowiedzi. Były naprawdę przydatne - czuję się mądrzejszy teraz  Oczywiście upvote'y już poszły.