再次调用函数时，变量未重新初始化

Question

我从堆栈ar中的一项开始。

我打算让代码执行的操作是：如果用户单击正确的链接（随机选择了一台计算机），则进入下一个“级别”，在该级别中向堆栈中再添加一个元素。

在下一级别中，用户必须按它们在堆栈中的顺序选择2个正确的链接。 一旦用户执行了此操作，他应该进入下一个级别，依此类推。 这类似于Simon所说的游戏，我只是想以此来模仿游戏的基本逻辑。

HTML：

<a href="javascript:void(0);" id="l1">Link 1</a>
<a href="javascript:void(0);" id="l2">Link 2</a>
<a href="javascript:void(0);" id="l3">Link 3</a>
<a href="javascript:void(0);" id="l4">Link 4</a>
<div id="log"></div>

Java脚本

function check() {
  var index = 0;
  $('body').click(function(event) {
    var log = $('#log');
    alert(index);

    if ($(event.target).is(ar[index])) {
      log.html(index + ' ' + event.target.id + ' was clicked.');
      index++;

      if (index === ar.length) {
        //if all clicked elements corresponded to correct 
        //order in array and reached end of array
        level +=1;
        console.log("Passing to next level. ", level);
        randomId();
        console.log(ar);
        log.html(ar);
        check();
      }
    } 
    else {
      log.html(index + ' ' + event.target.id + ' was clicked. Is wrong');  
      index = 0;
    }
  });
}

var ar = [];  
divIds = ["#l1", "#l2", "#l3", "#l4"];
level = 1;
randomId();
check();

function randomId() {
  var min = 0;
  var max = 3;
  var id = Math.floor(Math.random() * (max-min+1)) + min;
  var selectedId = divIds[id];

  ar.push(selectedId);
  alert(ar);
}

但是，当我第二次调用check()函数时（当我们移到堆栈中有2个元素的级别2时），尽管var index = 0是check（）的第一行，但index的值不是0 ）功能。

我正在使用console.log和alert来捕获索引的值，但是它们的绝对数量使我感到困惑。 通过查看警报弹出窗口的数量，我的检查功能似乎起了循环的作用。 第二次调用该函数时，为什么没有得到一个干净的记录？

Answer 1

更新-删除了不需要的index参数

如果我正确理解您的代码示例，则可以这样做

• 将 index和 level作为参数添加到check功能
• 调用check()时将一个初始值传递给 index / level （自调用）
• 替换 删除 index = 0; 的内部check() index = 0;

这样， check功能参数 index和 level会像非全局静态变量一样工作，这很可能是您所需要的。

我还建议您为变量等使用一个应用程序对象，而不要使用全局变量。

旁注：我无法获得实际的代码以使其看起来应该工作。 在删除index的用法并进行了一些调整之后，它开始恢复正常。 这是您打算如何工作，还是“ index”变量的目的是什么

 var MyApp = {}; MyApp.ar = []; MyApp.divIds = ["#l1", "#l2", "#l3", "#l4"]; (function check(level) { randomId(); $('body').click(function(event) { var log = $('#log'); if ($(event.target).is(MyApp.ar[level-1])) { log.html(event.target.id + ' was clicked.'); if (level === MyApp.ar.length) { //if all clicked elements corresponded to correct //order in array and reached end of array level++; console.log("Passing to next level. ", level); randomId(); console.log(MyApp.ar); } } else { log.html(event.target.id + ' was clicked. Is wrong'); } }); })(1); function randomId() { MyApp.ar.push(MyApp.divIds[Math.floor(Math.random() * MyApp.divIds.length)]); alert(MyApp.ar); } 

 a { padding: 0 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="javascript:void(0);" id="l1">Link 1</a> <a href="javascript:void(0);" id="l2">Link 2</a> <a href="javascript:void(0);" id="l3">Link 3</a> <a href="javascript:void(0);" id="l4">Link 4</a> <div id="log"></div> 

Answer 2

您在这里遇到的问题称为闭包。 基本上，您会将另一个功能范围内定义的功能绑定到click事件。 所有单击都引用它们范围的相同outer index并对其进行修改。

在这里阅读更多

如果在阅读后仍然无法理解问题所在，请在此处发表评论，我会尽力提供帮助，我只是不想重复别人所说的话。

编辑：正如其他人指出的那样，您在这里还有另一个问题，那就是您多次绑定了click事件。 您必须删除先前的绑定（甚至更好），只需更改值即可，不要绑定多个事件。

$('body').click(function(event){})

这行代码使您的点击有效。 您不需要多次运行check() ，因为一旦“附加”了事件处理程序一次，您只需要检查值就不必一遍又一遍地重新绑定它。

换句话说，使您的check()仅运行一次，然后将index放置在绑定的click函数中，而不是在外部，如果您希望每次单击时都将其重置。 如果您希望仅在经过一定数量的单击后才重置它，则需要将其保留在函数的关闭范围之外，如下所示：

function check(){
  index = 0;
  $('body').click(function(event){
    //NO INDEX HERE
  })
}

但是在这种情况下（现在就是这种情况），您需要在某种情况下从绑定到点击的功能中手动将其重置。 例如if(ar > neededNumber){index =0;}