javascript - 计数器变量在函数的第二遍中保存了 2 个值

Question

我正在制作一个打字游戏。当多个玩家玩游戏时，它会再次运行同一组函数。我使用变量 j 作为计数器，以便在正确键入单词时前进。由于某种原因，在每次上击键的第二次传递时，它会记录 j = 1 & j = 无论前一个玩家的最后一个单词的值 + 1 是什么。当每个玩家玩时，我希望他们输入的每组单词都是相同的，这样才公平。我不明白为什么会发生这种情况，甚至不明白变量如何同时具有 2 个值？!？!？

什么给出了？

这是有问题的代码，但可能涉及一堆回调，尽管调用此变量的唯一位置是在该函数内部。

//advances ship on correct typing
function runRace() {
  timer();
  var j = 1;
  //BUG HERE !! Works fine on first iteration but on second 
  //iterations value jumps beteween 1 and whatever the next 
  //one is. It's like on every keystroke it reassigns var j
  //back to 1, then back to the element number it was on 
  //last time
  //!!! j has 2 values !!!it's keeping the value from the 
  //prior running of run race  
  $(document).keyup(function(e){
    var targetWord = $(".toType").text();
    var typedWord = $("#word").val();
    //while (j < gameWords.length){
      console.log("j = " + j);
      if(typedWord === targetWord){
        $(".player").css({left: "+=15px",});
        targetWord = $(".toType").text(gameWords[j]);
        $("#word").val("");
        j++;
      }else {
        return
      };
    //}
  });
}

如果您需要查看其余代码来弄清楚这一点，就在这里。尽管由于某种原因它没有在 jsfiddle 上正确运行，但它除了 bug 之外还可以在本地 https://jsfiddle.net/ujsr139r/1/ 运行。

Answer 1

正如我在评论中提到的，每次调用 runRace() 时，您都会创建多个监听器。

您可以尝试这样的方法(请注意，这不是最好的方法，我只是在演示。在这种情况下，像 j 这样的全局变量并不是一个聪明的方法想法:

var j=1; // global because its outside of your function
$(function(){
  $(document).keyup(function(e){
    var targetWord = $(".toType").text();
    var typedWord = $("#word").val();
    //while (j < gameWords.length){
      console.log("j = " + j);
      if(typedWord === targetWord){
        $(".player").css({left: "+=15px",});
        targetWord = $(".toType").text(gameWords[j]);
        $("#word").val("");
        j++;
      }else {
        return
      };
    //}
  });
});

//advances ship on correct typing
function runRace() {
  j = 1;
  timer();  
}