JavaScript setInterval variável de contagem que não exerce

Question

Aqui está o meu código:

    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);

A minha pergunta é, por que é a variável showNo não segurando quando os começos de loop setInterval? Os ecrãs da consola 'indefinido' no exemplo acima. Esta pode ser uma pergunta simples, mas eu estou tentando me ensinar consulta e isso tem me preso ..

Qualquer resposta seria ótimo.

Graças.

Answer 1

Você está re-criando uma nova variável local chamado showNo, isso não faz referência a variável global chamada showNo.

É muito má prática para usar variáveis ??globais, eu aconselho embrulho isso dentro de uma função anônima

Eu acho que isso é o que você está procurando fazer:

  (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

O que @Jacob disse é verdade, mas você pode querer olhar a simplificar o seu código um pouco como este:

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

Answer 3

Eu recomendo que você leia Javascript Closures , então você ter uma compreensão profunda sobre como identificadores são resolvidos em JavaScript.

Answer 4

No vasto mundo de JavaScript, declarações var são função de escopo, não bloqueie escopo. Eles também são elevados para a parte superior de uma função. Assim, você pode muito bem ter escrito:

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);

Você provavelmente pode ver o problema agora.

aconselhar todos os outros na refatoração isso é importante também. Mas entender o escopo em JavaScript, e esses incômodos desaparecerá.

Answer 5

Isto irá manter o valor.

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