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

Question

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

我打算代码做的是：如果用户点击正确的链接（一台计算机已随机选择），我们继续到下一个“级别”，我们在堆栈中再添加一个元素。

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

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>

Javascript

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() 函数。

我正在使用 console.log 和 alert 来捕获 index 的值，但它们的数量让我感到困惑。通过查看警报弹出窗口的数量，我的检查功能似乎就像一个循环。为什么我们在第二次调用该函数时没有得到一个干净的状态？

Answer 1

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

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

• 添加 index 和 level 作为check 函数的参数
• 在调用check()（自调用）时将起始值传递给index/level
• replace 去掉内部的check() 用index = 0;

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

我还为您的变量等推荐一个 app 对象，而不是使用全局变量。

旁注：我无法让实际代码按其应有的工作方式运行。在放弃了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

您在这里遇到的称为闭包。基本上，您将在另一个函数范围内定义的函数绑定到您的点击事件。所有的点击都引用了同一个outer index的作用域并对其进行修改。

阅读更多here

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

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

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

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

换句话说，让你的check() 只运行一次，并将你的index 放在绑定的click 函数中，而不是放在外面，如果你希望它在每次点击时都重置。如果您希望它仅在一定数量的点击后重置，您需要将其保持在函数的关闭之外，如下所示：

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

但是在这种情况下（这就是您现在所拥有的），您需要在某些条件下手动重置它，从您绑定到点击的函数中。例如if(ar > neededNumber){index =0;}