Цикл JavaScript setInterval не содержит переменную
-
19-09-2019 - |
Вопрос
Вот мой код:
var showNo = 1;
window.setInterval(function() {
console.log(showNo);
if(showNo === 1) { var nextNo = 2; }
else if(showNo === 2) { var nextNo = 3; }
else if(showNo === 3) { var nextNo = 4; }
else if(showNo === 4) { var nextNo = 5; }
else if(showNo === 5) { var nextNo = 1; }
else { var showNo = 1; var nextNo = 2; }
var showNo = nextNo;
}, 500);
Мой вопрос: почему переменная showNo не сохраняется при запуске цикла setInterval?В приведенном выше примере консоль отображает «неопределено».Это может быть простой вопрос, но я пытаюсь научить себя задавать вопросы, и это меня зацепило..
Любые ответы были бы великолепны.
Спасибо.
Решение
Вы воссоздаете новую ЛОКАЛЬНУЮ переменную с именем showNo
, это не ссылка на ГЛОБАЛЬНУЮ переменную с именем showNo
.
Очень плохая практика использовать глобальные переменные, я советую обернуть это внутри анонимной функции.
Я думаю, это то, что вы хотите сделать:
(function() {
var showNo = 1;
window.setInterval(function() {
console.log(showNo);
if( showNo >== 1 && showNo <== 4 ) {
showNo++;
} else if( showNo === 5 ) {
showNo = 1;
} else {
showNo = 2;
}
}, 500);
})();
Другие советы
то, что сказал @Jacob, верно, но вы можете немного упростить свой код:
var showNo = 1;
window.setInterval(function() {
console.log(showNo);
showNo++;
if(showNo > 4)
showNo = 1;
}, 500);
Я бы порекомендовал вам прочитать Замыкания Javascript, тогда вы получите глубокое понимание того, как идентификаторы разрешаются в JavaScript.
В огромном мире JavaScript var
объявления имеют область действия функции, а не блока.Они также возводятся в начало функции.Итак, вы могли бы также написать:
var showNo = 1;
window.setInterval(function() {
var showNo; // I'm localizing it
var showNo; // and again
var nextNo; // Now I'm declaring a new variable
var nextNo; // and I just can't stop
var nextNo; // myself from declaring it again
var nextNo; // its like beating
var nextNo; // a
var nextNo; // dead horse.
console.log(showNo);
if(showNo === 1) { nextNo = 2; }
else if(showNo === 2) { nextNo = 3; }
else if(showNo === 3) { nextNo = 4; }
else if(showNo === 4) { nextNo = 5; }
else if(showNo === 5) { nextNo = 1; }
else { showNo = 1; nextNo = 2; }
showNo = nextNo;
}, 500);
Вероятно, теперь вы можете увидеть проблему.
Советы остальных по рефакторингу также важны.Но поймите область видимости в JavaScript, и эти неприятности исчезнут.
Это сохранит ценность.
function hello(){
var count = 0;
var timer = setInterval( function(){ count+=1;alert(count); },2000);
}