Проблема с областью действия с циклами for в Javascript
Я понимаю, что это, вероятно, классифицируется как дубликат, однако я подробно прочитал этот вопрос и ответы, но все еще не могу понять это.
У меня есть этот код, но в функции «focus» «i» всегда равно 2 (значение pageSearchInput.length), и я хочу, чтобы оно было 0,1 соответственно в каждом цикле.
Я понимаю, что это проблема области видимости, но я не могу понять, как исправить этот без, просто используя let.
Если бы кто-нибудь мог объяснить, как это работает, я был бы очень благодарен.
for (i = 0; i < pageSearchInput.length; i++) {
pageSearchInput[i].addEventListener("focus", function(){
pageSearchContainer[i].style.outline = "4px solid #ffcc33";
pageSearchButton[i].style.backgroundColor = "#008920";
pageSearchButton[i].style.border = "1px solid #008920";
});
}
@ArthurWietzorek он уже может быть определен вне цикла?
Почему не стал бы вы просто используете let? Это одна из основных причин существования let.
Потому что он не поддерживается в IE10 или более ранних версиях, а веб-сайт, который я создаю, нуждается в этом. Этот вопрос был отмечен как повторяющийся для вопроса «разрешить», когда я прямо сказал, что не хочу использовать его в вопросе. Слегка доволен
Это потому, что i увеличивается до pageSearchInput.length - 1 и цикл не завершается. Затем в какой-то момент в будущем выполняется прослушиватель событий, используя значение i * в этот момент времени . Wrap the code inside in a function that takes a parameter and pass in i`, и он будет выполняться, как ожидалось.
@paddyfields: я обновил цель. Есть миллиард вопросов, которые обсуждают эту тему. Я не в восторге от триггера. Может быть, вы разместили этот вопрос?
Не особо, я новичок в javascript, и не всегда легко узнать терминологию, которую нужно искать. Спасибо за ссылку, это явно то, что мне нужно было прочитать.
Пожалуйста. Но в качестве примечания, в следующий раз, пожалуйста, воздержитесь от называния кого-то «счастливым». Это не очень хорошо. Если вы не согласны, не стесняйтесь спрашивать пользователя, почему он сделал то, что сделал.
Конечно, еще раз спасибо.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 5
Вы должны использовать ключевое слово let, чтобы сохранить значение i в области для loop.
for (let i = 0; i < pageSearchInput.length; i++) {
Другой способ - использовать Выражение немедленно вызываемой функции
(function(i){
pageSearchInput[i].addEventListener("focus", function(){
});
})(i);
Спасибо, но в вопросе я сказал, что не хочу использовать let. Код должен быть совместимым с IE.
@paddyfields - вот для чего нужны транспилеры.
@paddyfields, обновляю свой ответ.
Просто сделайте i параметром функции, передайте его и верните функцию, которая обрабатывает событие:
for (i = 0; i < pageSearchInput.length; i++) {
pageSearchInput[i].addEventListener("focus", (function(i){
return function() {
pageSearchContainer[i].style.outline = "4px solid #ffcc33";
pageSearchButton[i].style.backgroundColor = "#008920";
pageSearchButton[i].style.border = "1px solid #008920";
};
})(i));
}
Если вы не хотите использовать let, вам следует создать функцию упаковки.
for (i = 0; i < pageSearchInput.length; i++) {
pageSearchInput[i].addEventListener("focus", function(){
return (function(i) {
pageSearchContainer[i].style.outline = "4px solid #ffcc33";
pageSearchButton[i].style.backgroundColor = "#008920";
pageSearchButton[i].style.border = "1px solid #008920";
})(i);
});
}
Вы можете использовать IIFE (выражение немедленно вызываемой функции)
(function () {
statements
})();
It is a design pattern which is also known as a Self-Executing Anonymous Function and contains two major parts. The first is the anonymous function with lexical scope enclosed within the Grouping Operator (). This prevents accessing variables within the IIFE idiom as well as polluting the global scope.
The second part creates the immediately executing function expression () through which the JavaScript engine will directly interpret the function.
for (i = 0; i < pageSearchInput.length; i++) {
(function(i){
pageSearchInput[i].addEventListener("focus", function(){
pageSearchContainer[i].style.outline = "4px solid #ffcc33";
pageSearchButton[i].style.backgroundColor = "#008920";
pageSearchButton[i].style.border = "1px solid #008920";
});
})(i);
}
Вы можете попробовать использовать IIFE, чтобы решить вашу проблему, связанную с областью видимости.
for (i = 0; i < pageSearchInput.length; i++) {
(function(j){
return pageSearchInput[j].addEventListener("focus", function(){
pageSearchContainer[j].style.outline = "4px solid #ffcc33";
pageSearchButton[j].style.backgroundColor = "#008920";
pageSearchButton[j].style.border = "1px solid #008920";
})
}(i))
}
Для подробностей найдите объяснение в этом посте. http://learnwebtechs.com/2018/05/11/understanding-javascript-closures-with-example
Я не уверен, если честно, но, может быть, определить
var iвне цикла?