时间戳

首页 > 解决方案 > 代码在函数中的行为不同

javascript - 代码在函数中的行为不同

问题描述

我构建了一个运行良好的简单 switch/case 语句。按下回车键，每个案例都被随机抽取并从数组中删除，直到没有剩余。

但是，当我单击按钮调用包含相同 switch/case 语句的函数时，代码的工作方式不同。每次按回车键都不会到达数组的末尾，而是连续绘制一个随机案例，而不会结束。

似乎我的阵列在每次按键时都会重置。为什么代码在函数中的功能不一样？

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>

标签： javascript

解决方案

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

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

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

  1. 全局定义变量（函数外）

  2. 使用对象（用作类）：JavaScript 中的静态变量 或此处：https ://www.quora.com/How-do-you-create-static-variables-in-JavaScript

推荐阅读