Question

我正在使用jQuery和javascript制作打字游戏。它在单人游戏中运行良好，可以在http://typetothestars.bitballoon.com/随意播放。但是，我计划不断提高其复杂程度。所以我现在尝试添加多个播放器。

这里是jsfiddle减去图像https://jsfiddle.net/u32s4yty/

我的问题在于我的runRace函数。我期待比赛为选手1运行，当比赛结束时，它将再次为选手2开始。相反，它会立即运行所有迭代。所以显然setTimeout不会在这里工作。

有关如何使其有效的任何建议吗？

谢谢！

// ** RUNNING GAME FUNCTIONS ** \\

//hides instructions and reveals game
function setupRace(i) {
  console.log("In Race Setup")
  $("#word").show();
  document.getElementById("word").focus();
  generateWords();
  $(".toType").text(gameWords[0]);
  $("#instructions").hide();
  $(".wordDisplay").show();
  $(".player").show();
  var playerAvatar = 'url("images/' + playerInfo[i].avatar + '.png")'
  $(".player").css({background: playerAvatar});
}

//game timer - IS NOT STOPPING THE OTHER FUNCTIONS FROM RUNNING
var timeoutID;
function timer(i) {
  timeoutID = window.setTimeout(checkEndRace, 3000, i)
  console.log("i = " + i);
  console.log(playerInfo[i]);
}

function checkEndRace(i) {
  console.log("in check end race - num players " + numPlayers);
  if (i < numPlayers - 1) {
    setupRace(i);
  }else {
    endRace(i);
  }
}

//advances ship on correct typing
function runRace() {
  console.log("In run race");
  var i = 0;
  while (i < playerInfo.length) {
    console.log("in run race loop");
    setupRace(i);
    timer(i);
    //timer is skipping ahead to the next iteration, eventhough 
    //checkEndRace hasn't run yet
    var j = 1;
    $(document).keyup(function(e){
      var targetWord = $(".toType").text();
      var typedWord = $("#word").val();
      while (j < gameWords.length){
        if(typedWord === targetWord){
          $(".player").css({left: "+=15px",});
          targetWord = $(".toType").text(gameWords[j]);
          $("#word").val("");
          j++;
        }else {
          return
        };
      }
    });
    i ++;
  };
}

我希望使用setTimeout来停止所有函数以下函数，直到间隔完成。

Answer 1

调用setTimeout立即返回并且只执行一次，因此处理它们的一种简单/常用方法是对setTimeout进行尾调用（tick）并将所有请求放入队列中。

// ** RUNNING GAME FUNCTIONS ** \\

var raceHandlers = [];
var raceTimout = 3000;

function tick() {
  // Tail call
  if (raceHandlers.length > 0) {
     var action = raceHandlers.pop();
     setTimeout(action[0],raceTimeout,action[1]);
  }
}

//hides instructions and reveals game
function setupRace(i) {
  console.log("In Race Setup")
  $("#word").show();
  document.getElementById("word").focus();
  generateWords();
  $(".toType").text(gameWords[0]);
  $("#instructions").hide();
  $(".wordDisplay").show();
  $(".player").show();
  var playerAvatar = 'url("images/' + playerInfo[i].avatar + '.png")'
  $(".player").css({background: playerAvatar});
  tick();
}

//advances ship on correct typing
function runRace() {
  console.log("In run race");
  var i = 0;
  while (i < playerInfo.length) {
    console.log("in run race loop");
    //setupRace(i);
    raceHandlers.unshift([setupRace,i]);

    //timer is skipping ahead to the next iteration, eventhough 
    //checkEndRace hasn't run yet
    var j = 1;
    $(document).keyup(function(e){
      var targetWord = $(".toType").text();
      var typedWord = $("#word").val();
      while (j < gameWords.length){
        if(typedWord === targetWord){
          $(".player").css({left: "+=15px",});
          targetWord = $(".toType").text(gameWords[j]);
          $("#word").val("");
          j++;
        }else {
          return
        };
      }
    });
    i ++;
  };

  raceHandlers.unshift([endRace,playerInfo.length]);
  tick();
}

setTimeout执行不会阻止进一步的迭代发生 - 需要其他解决方案

1 个答案: