Почему асинхронная функция внутри цикла выполняет последнюю итерацию много раз?
1,00
р.
Есть setTimeout внутри цикла for:
for (var i = 1 i <= 5 i++) { setTimeout(function() { console.log(i) }, i * 1000) }<br>
Я хочу показывать числа 1, 2, 3, 4, 5, но показывает 6, 6, 6, 6, 6. Почему?
Ответ
Дело в том, что функция выполняется после того, что цикл закончится. Поэтому, i уже равно 6, когда console.log(i) выполняется первый раз.
Если еще непонятно, вот похожий пример в псевдокоде:
У меня 1 камень. Через минуту скажи, сколько у меня камней. Дай мне камень сейчас. Через 2 минуты скажи, сколько у меня камней. Дай мне камень сейчас.
Получится, что сейчас мне даст 2 камня, в итоге у меня будут 3. Через минуту скажет, сколько у меня камней (т.е. 3), и через две минуты опять скажет, что у меня 3 камня.
Как это решить?
Вставить асинхронную функцию в анонимную функцию, чтобы передать другое значение i функции вывода на каждой итерации. Это самое обычное решение.
for(var i = 1 i <= 5 i++) { (function(i) { setTimeout(function() { console.log(i) }, i * 1000) })(i) }<br>
Создавать много одинаковых функций - не очень хорошо, можно поднять эту функцию выше:
function pass(i) { return function () { console.log(i) } } for(var i = 1 i <= 5 i++) { setTimeout(pass(i), i * 1000) }<br>
Использовать рекурсию вместо цикла. Это тоже обычное решение.
(function f(i) { if (i > 5) return setTimeout(function() { console.log(i) f(i + 1) }, 1000) })(1)
Использовать Function.prototype.bind(), чтобы создать новую функцию на каждой итерации. Это короче первого варианта, но IE8 и ниже не поддерживают .bind.
for (var i = 1 i <= 5 i++) { setTimeout(function(i) { console.log(i) }.bind(null, i), i * 1000) }<br>
Передавать аргументы через setTimeout. Это поддерживают все современные браузеры, но если речь идёт о старых, то стоит проверить.
for(var i = 1 i <= 5 i++) { setTimeout(function (i) { console.log(i) }, i * 1000, i) }<br>
Замечу, что теперь функции в цикле ничем не отличаются друг от друга, поэтому можно сделать одну функцию:
function doSmth(i) { console.log(i) } for(var i = 1 i <= 5 i++) { setTimeout(doSmth, i * 1000, i) }<br>
Использовать let . Это удобный вариант, но это новая возможность в ECMAScript 2015, так что еще не работает в большинстве браузеров. Если хотите использовать ECMAScript 2015 до того, что браузеры его поддерживают, рекомендую попробовать Babel. Внимание: некоторые браузеры (например, IE 11) поддерживают let, но не поддерживают его в цикле for.
for (let i = 1 i <= 5 i++) { setTimeout(function() { console.log(i) }, i * 1000) }<br>
for (var i = 1 i <= 5 i++) { setTimeout(function() { console.log(i) }, i * 1000) }<br>
Я хочу показывать числа 1, 2, 3, 4, 5, но показывает 6, 6, 6, 6, 6. Почему?
Ответ
Дело в том, что функция выполняется после того, что цикл закончится. Поэтому, i уже равно 6, когда console.log(i) выполняется первый раз.
Если еще непонятно, вот похожий пример в псевдокоде:
У меня 1 камень. Через минуту скажи, сколько у меня камней. Дай мне камень сейчас. Через 2 минуты скажи, сколько у меня камней. Дай мне камень сейчас.
Получится, что сейчас мне даст 2 камня, в итоге у меня будут 3. Через минуту скажет, сколько у меня камней (т.е. 3), и через две минуты опять скажет, что у меня 3 камня.
Как это решить?
Вставить асинхронную функцию в анонимную функцию, чтобы передать другое значение i функции вывода на каждой итерации. Это самое обычное решение.
for(var i = 1 i <= 5 i++) { (function(i) { setTimeout(function() { console.log(i) }, i * 1000) })(i) }<br>
Создавать много одинаковых функций - не очень хорошо, можно поднять эту функцию выше:
function pass(i) { return function () { console.log(i) } } for(var i = 1 i <= 5 i++) { setTimeout(pass(i), i * 1000) }<br>
Использовать рекурсию вместо цикла. Это тоже обычное решение.
(function f(i) { if (i > 5) return setTimeout(function() { console.log(i) f(i + 1) }, 1000) })(1)
Использовать Function.prototype.bind(), чтобы создать новую функцию на каждой итерации. Это короче первого варианта, но IE8 и ниже не поддерживают .bind.
for (var i = 1 i <= 5 i++) { setTimeout(function(i) { console.log(i) }.bind(null, i), i * 1000) }<br>
Передавать аргументы через setTimeout. Это поддерживают все современные браузеры, но если речь идёт о старых, то стоит проверить.
for(var i = 1 i <= 5 i++) { setTimeout(function (i) { console.log(i) }, i * 1000, i) }<br>
Замечу, что теперь функции в цикле ничем не отличаются друг от друга, поэтому можно сделать одну функцию:
function doSmth(i) { console.log(i) } for(var i = 1 i <= 5 i++) { setTimeout(doSmth, i * 1000, i) }<br>
Использовать let . Это удобный вариант, но это новая возможность в ECMAScript 2015, так что еще не работает в большинстве браузеров. Если хотите использовать ECMAScript 2015 до того, что браузеры его поддерживают, рекомендую попробовать Babel. Внимание: некоторые браузеры (например, IE 11) поддерживают let, но не поддерживают его в цикле for.
for (let i = 1 i <= 5 i++) { setTimeout(function() { console.log(i) }, i * 1000) }<br>
