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

setTimeout executing is not stopping further iterations from occurring - need other solution

本文关键字：其他 解决方案 进一步 执行 setTimeout 迭代      更新时间：2023-09-26

我正在制作一款使用jQuery和javascript的打字游戏。它作为一款单人游戏运行得很好，你可以在http://typetothestars.bitballoon.com/上自由地玩它。然而，我计划继续提高它的复杂性。所以我现在正在尝试添加multiplayer。

这里是jsfiddle - images 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来停止以下函数的所有函数，直到间隔完成。

对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();
}
相关文章：