Пожалуйста, посмотрите код ниже, чтобы понять закрытие более подробно:
for(var i=0; i< 5; i++){
setTimeout(function(){
console.log(i);
}, 1000);
}
Вот что будет выводиться? 0,1,2,3,4 не то, что будет 5,5,5,5,5 из-за закрытия
Так как это решит? Ответ ниже:
for(var i=0; i< 5; i++){
(function(j){ //using IIFE
setTimeout(function(){
console.log(j);
},1000);
})(i);
}
Позвольте мне просто объяснить, когда созданная функция ничего не происходит, пока она не вызовет цикл for в 1-м коде, вызываемый 5 раз, но не вызывается сразу, поэтому, когда она вызывается, т. Е. Через 1 секунду, и это также асинхронно, так что до этого цикл завершается сохранить значение 5 в переменной i и, наконец, выполнить setTimeout функцию пять раз и вывести 5,5,5,5,5
Вот как это решить, используя IIFE, т.е. выражение функции немедленного вызова
(function(j){ //i is passed here
setTimeout(function(){
console.log(j);
},1000);
})(i); //look here it called immediate that is store i=0 for 1st loop, i=1 for 2nd loop, and so on and print 0,1,2,3,4
Для получения дополнительной информации, пожалуйста, разберитесь с контекстом выполнения, чтобы понять закрытие.
Существует еще одно решение, позволяющее решить эту проблему с помощью let (функция ES6), но под капотом работает вышеуказанная функция
for(let i=0; i< 5; i++){
setTimeout(function(){
console.log(i);
},1000);
}
Output: 0,1,2,3,4
=> Дополнительные пояснения:
В памяти, когда для выполнения цикла выполняется картинка, как показано ниже:
Петля 1)
setTimeout(function(){
console.log(i);
},1000);
Петля 2)
setTimeout(function(){
console.log(i);
},1000);
Петля 3)
setTimeout(function(){
console.log(i);
},1000);
Петля 4)
setTimeout(function(){
console.log(i);
},1000);
Петля 5)
setTimeout(function(){
console.log(i);
},1000);
Здесь я не выполняется, а затем после полного цикла, я сохраняю значение 5 в памяти, но его область видимости всегда видна в дочерней функции, поэтому, когда функция выполняется внутри setTimeout из пяти раз, она печатает 5,5,5,5,5
, чтобы решить эту проблему, используйте IIFE, как описано выше.