JavaScript setInterval цикл не содержит переменную

Question

Вот мой код:

    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? Консоль отображает «undefined» в приведенном выше примере. Это может быть простой вопрос, но я пытаюсь научить себя задавать вопросы, и это застряло у меня ..

Любые ответы будут великолепны.

Спасибо.

Answer 1

Вы заново создаете новую переменную LOCAL с именем showNo, это не относится к переменной GLOBAL с именем 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);
    })();

Answer 2

В широком мире 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, и эти неприятности исчезнут.

Answer 3

Я бы порекомендовал вам прочитать Javascript Closures , тогда у вас будет глубокое понимание того, как идентификаторы разрешаются в JavaScript.

Answer 4

То, что сказал @Jacob, верно, но вы можете посмотреть на упрощение кода следующим образом:

var showNo = 1;     
window.setInterval(function() {
      console.log(showNo);
      showNo++;
      if(showNo > 4)
          showNo = 1;
      }, 500);

Answer 5

Это будет содержать значение.

function hello(){
    var count = 0;
    var timer = setInterval( function(){  count+=1;alert(count); },2000);
}