Question

我构造了一个简单的switch / case语句，效果很好。按下回车键，将随机抽取每种情况并将其从阵列中移除，直到没有任何残留。

但是，当我单击一个按钮以调用包含相同switch / case语句的函数时，代码将无法正常工作。而不是到达数组的末尾，每次按Enter键都会连续绘制一个随机的情况，而不会结束。

每按一次键，似乎我的阵列正在重置。函数中的代码为何功能不相同？

var casesDrawn = [0, 1, 2];
document.body.addEventListener( 'keyup', function (e) {
  if ( e.keyCode == 13 && casesDrawn.length > 0) {
    randSelect();
  }
  function randSelect(){
    var randNum = Math.floor(Math.random() * casesDrawn.length);
    var num = casesDrawn[randNum];
    casesDrawn.splice(randNum, 1);

    switch (num){
      case 0:
        document.getElementById('show').innerHTML = 'case 0 selected';
        break;
      case 1: 
        document.getElementById('show').innerHTML = 'case 1 selected';
        break;
      case 2:
        document.getElementById('show').innerHTML = 'case 2 selected';
        break;
    }
  }
});

function myFunction(){
  var casesDrawn = [0, 1, 2];
  document.body.addEventListener( 'keyup', function (e) {
    if ( e.keyCode == 13 && casesDrawn.length > 0) {
      randSelect();
    }
    function randSelect(){
      var randNum = Math.floor(Math.random() * casesDrawn.length);
      var num = casesDrawn[randNum];
      casesDrawn.splice(randNum, 1);

      switch (num){
        case 0:
          document.getElementById('show').innerHTML = 'case 3 selected';
          break;
        case 1: 
          document.getElementById('show').innerHTML = 'case 4 selected';
          break;
        case 2:
          document.getElementById('show').innerHTML = 'case 5 selected';
          break;
      }
    }
  });
}

<p id="show"></p>
<button onclick="myFunction()">Click to jump to Function</button>

Answer 1

每次调用函数时，都会重新定义变量/ array casesDrawn。这不会在函数外部发生，因为“在函数外部声明的变量变为GLOBAL。” W3

但是“在JavaScript函数中声明的变量变成该函数的本地变量。” W3

如果您希望变量casesDrawn在不同的函数调用之间保留其值，则有几种选择：

全局定义变量（在函数外部）
使用一个对象（用作类）：Static variables in JavaScript 或此处：https://www.quora.com/How-do-you-create-static-variables-in-JavaScript

代码放在函数中时的行为不同

1 个答案: