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

我的問題是，當setInterval循環啟動時，為什么showNo變量沒有保持？ 控制台在上面的示例中顯示“未定義”。 這可能是一個簡單的問題，但我正在努力教自己查詢，這讓我卡住了..

任何答案都會很棒。

謝謝。

Answer 1

您正在重新創建一個名為showNo的新LOCAL變量，這不會引用名為showNo的GLOBAL變量。

使用全局變量是非常糟糕的做法，我建議將其包裝在匿名函數中

我想這就是你要做的事情：

  (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

@Jacob說的是真的，但你可能想看一下像這樣簡化你的代碼：

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

Answer 3

我建議您閱讀Javascript Closures ，然后您將對如何在JavaScript中解析標識符有深入的了解。

Answer 4

在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 5

這將保持價值。

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