Question

感谢您抽出宝贵时间帮助我。

我正在编写一个游戏，其中动画火车图标沿着给定路径移动到目的地，沿途的航路点暂停。这是为了给人一种动画的印象。

游戏采用Facebook Javascript编码。我需要找到一种方法让火车图标暂停1秒钟，然后再转到下一个航路点。我希望找到一个允许我暂停脚本执行一秒钟的函数，但JS中似乎没有这样的东西。所以我尝试了setTimeout，但我的主要问题是双重的：

我需要将一个数组作为参数传递给回调函数，我无法弄清楚如何让setTimeout这样做。
我终于成功使用setTimeout为5个航点执行我的火车动画代码（我通过使用全局变量克服了1中的问题）。不幸的是，似乎对setTimeout的所有五次调用几乎同时排队，这导致第一次setTimeout等待一秒钟，然后他们都立刻解雇了火车动画的错觉。

我一直在和这个问题争斗六个小时。如果有人能帮助我找到解决方案，那就太棒了。谢谢！

以下是代码：

function myEventMoveTrainManual(evt, performErrorCheck) {
      if(mutexMoveTrainManual == 'CONTINUE') {
        var ajax = new Ajax();
        var param = {};
        if(evt) {
          var cityId = evt.target.getParentNode().getId();
          var param = { "city_id": cityId };
        }
        ajax.responseType = Ajax.JSON;
        ajax.ondone = function(data) {
            var actionPrompt = document.getElementById('action-prompt');
            actionPrompt.setInnerXHTML('<span><div id="action-text">'+
              'Train en route to final destination...</div></span>');
            for(var i = 0; i < data.length; i++) {
              statusFinalDest = data[i]['status_final_dest'];
               //pause(1000);
               gData = data[i];
               setTimeout(function(){drawTrackTimeout()},1000);
              if(data[i]['code'] == 'UNLOAD_CARGO' && statusFinalDest == 'ARRIVED') {
                unloadCargo();
              } else if (data[i]['code'] == 'MOVE_TRAIN_AUTO' || data[i]['code'] == 'TURN_END') {
                //moveTrainAuto();
              } else {
                // handle error 
              }
              mutexMoveTrainManual = 'CONTINUE';
            }  
        }
        ajax.post(baseURL + '/turn/move-train-final-dest', param);
      }

}


function drawTrackTimeout() {
  var trains = [];
  trains[0] = gData['train'];
  removeTrain(trains);
  drawTrack(gData['y1'], gData['x1'], gData['y2'], gData['x2'], '#FF0', trains);
  gData = null;
}

Answer 1

通常这可以通过创建一个具有所有自己的数据和方法的对象（比如名为 myTrain ）来完成，然后调用一个 myTrain.run mehod看看火车在哪里。如果它位于两个站之间，它会使用 setTimeout 调用自身并说出50ms的延迟。当它到达一个电台时，它会在1000毫秒内自行呼叫，在电台暂停1秒钟。

如果您一次排队 setTimeouts ，则会冒一些其他进程延迟这些进程的风险，然后一次全部运行。

嘿，有点乐趣（小心包装）。需要一些良好的'原型继承实践：

<!-- All the style stuff should be in a rule -->
<div style="position: relative; border: 1px solid blue;">
  <div id="redTrain"
   style="width:10px;height:10px;background-color:red; position:absolute;top:0px;left:0px;"></div>
</div>

<script type="text/javascript">

// Train constructor
function Train(id) {
  this.element = document.getElementById(id);
  this.timerId;
}

// Methods
// Trivial getPos function
Train.prototype.getPos = function() {
  return this.element.style.left;
}

// Trivial setPos function
Train.prototype.setPos = function(px) {
  this.element.style.left = parseInt(px,10) + 'px';
}

// Move it px pixels to the right
Train.prototype.move = function(px) {
  this.setPos(px + parseInt(this.getPos(),10));
}

// Recursive function using setTimeout for animation
// Probably should accept a parameter for lag, long lag
// should be a multiple of lag
Train.prototype.run = function() {

  // If already running, stop it
  // so can interrupt a pause with a start
  this.stop();

  // Move the train
  this.move(5);

  // Keep a reference to the train for setTimeout
  var train = this;

  // Default between each move is 50ms
  var lag = 50;

  // Pause for 1 second each 100px
  if (!(parseInt(this.getPos(),10) % 100)) {
    lag = 1000;
  }

  train.timerId = window.setTimeout( function(){train.run();}, lag);

}

// Start should do a lot more initialising
Train.prototype.start = function() {
  this.run();
}

// Stops the train until started again
Train.prototype.stop = function() {
  if (this.timerId) {
    clearTimeout(this.timerId);
  }
}

// Set back to zero
Train.prototype.reset = function() {
  this.stop();
  this.setPos(0);
}

// Initialise train here
var myTrain = new Train('redTrain');

</script>
<p>&nbsp;</p>
<button onclick="myTrain.start();">Start the train</button>
<button onclick="myTrain.stop();">Stop the train</button>
<button onclick="myTrain.reset();">Reset the train</button>

Answer 2

要传递参数，这可能会对您有所帮助：

setTimeout(function() {
    (function(arg1, arg2) {
        // you can use arg1 / arg2 here
    })('something', 123);
}, 1000);

或者，如果您使用已定义的函数：

setTimeout(function() {
    someFunction('something', 123);
}, 1000);

它基本上开始超时;一秒钟后，使用指定的参数调用该函数。

Answer 3

如何使用OO原则来简化问题？创建一个“对象”列车，其中包含以下方法：

//train obj
function Train(){
   this.isOnWaypoint = function(){
     return calculateIsWayPoint()
   }

}

//main logic
var train = new Train()
var doneWaiting = false
var doneWaitingTimeout = undefined
var gameLoop = setInterval(1000,function(){
   ...
   if(train.isOnWaypoint() && !doneWaiting){
     if(doneWaitingTimeout == undefined){
       setTimeOut(5000,function(){
         doneWaiting = true
         doneWaitingTimeout = undefined
       })
     }
   }
   ...
})

Answer 4

这是我最终提出的解决方案：

function drawTrackTimeout() {
  if(gData != null && gIndex < gData.length) {
    var trains = [];
    trains[0] = gData[gIndex]['train'];
    removeTrain(trains);
    drawTrack(gData[gIndex]['y1'], gData[gIndex]['x1'], gData[gIndex]['y2'], gData[gIndex]['x2'], '#FF0', trains);

    statusFinalDest = gData[gIndex]['status_final_dest'];
    if(statusFinalDest == 'ARRIVED') {
      unloadCargo();
    } else if (gData[gIndex]['code'] == 'MOVE_TRAIN_AUTO' || gData[gIndex]['code'] == 'TURN_END') {
      //moveTrainAuto();
    } else {
      // handle error 
    }
    gIndex++;
  } else {
    clearInterval(gIntid);
    gIntid = null;
    gData = null;
    gIndex = 0;
  }
}


function myEventMoveTrainManual(evt, performErrorCheck) {
//debugger;
      if(mutexMoveTrainManual == 'CONTINUE') {
        var ajax = new Ajax();
        var param = {};
        if(evt) {
          var cityId = evt.target.getParentNode().getId();
          var param = { "city_id": cityId };
        }
        ajax.responseType = Ajax.JSON;
        ajax.ondone = function(data) {
            var actionPrompt = document.getElementById('action-prompt');
            actionPrompt.setInnerXHTML('<span><div id="action-text">'+
              'Train en route to final destination...</div></span>');
            gData = data;
            gIndex = 0;            
            gIntid = setInterval(function(){drawTrackTimeout()},1000);              
        }
        ajax.post(baseURL + '/turn/move-train-final-dest', param);
      }
}

需要延迟javascript执行，但是setTimeout证明是有问题的

4 个答案: