Javascript电梯程序

Question

我正在用HTML/CSS/Javascript创建一个电梯，在javascript的某些部分遇到了一个问题。

我试着记录下每个按下的按钮，然后让电梯按顺序到达每一层。我目前正在将每个楼层添加到一个数组中。

每次运行程序时，电梯都会在每次迭代中遍历整个数组。

如何将每一层添加到数组中，然后其中一层被访问，它被移除，程序继续在现有数组中移动？

JavaScript

var Elevator = (function Elevator() {

  var floors = 10,
  origin = 1,
  queue = [],
  current, 
  isMoving = false,
  destination;
  
  

  
  // this gets the floor being click
  // and assigns the value of destination to the new floor
  function getFloors(event) {
    event.preventDefault();
    destination = $(this).attr('href');
    console.log(destination);
    if (destination !== origin){
     isMoving = true;
     queue.push(destination);
     console.log(queue);
   }
 }

 function moveFloors(destination){
 }

  // this acts as a controller
  // for all events and how and what we bind them to
  function bindEvents() {
    $('.btn').on('click', getFloors);
  }
  // this runs the bind events
  // and only runs the bind events
  function init(){
    bindEvents();
  }
  // this makes the init method public for invoking
  return {
    init: init()
  };
})();

Elevator.init();

Answer 1

我真的不理解您要完成的任务，但是由于您使用的是jQuery，并且希望迭代所有楼层，因此可以使用each函数。例如$(floors).each(function() { // do something };

哦，顺便说一下，我看到你使用了push，你可以使用pop()来提取数组中的第一个对象。

Answer 2

这对我来说就像是在尖叫“状态机”，所以我强烈建议你至少读一些this article。

但是，对于手头的问题，当电梯停止移动时，您需要做一些工作。我看到您有一个isMoving标志，所以当它被设置为false时，从queue中splice您到达的楼层，并开始移动到数组中的下一个目的地。

重复上述操作，直到queue数组为空。

Answer 3

你可以这样定义你的电梯

var Elevator = (function Elevator() {

  var floors = 10,
  queue = [],
  current = 1, 
  isMoving = false,
  destination;

  // This gets the floor being clicked and adds it to the queue
  // if the elevator is stationary and the floor is not the current floor,
  // or if the elevator is in motion and the floor is not the most recently requested floor.
  // It also sets the elevator in motion if a floor was added to the queue.
  function getFloors(event) {
    event.preventDefault();
    destination = $(this).attr('href');
    console.log(destination);
    var repeatedFloor = isMoving ? queue[queue.length - 1] : current;
    if (destination !== repeatedFloor){
      queue.push(destination);
      if (!isMoving) {
        isMoving = true;
        setTimeout(moveFloors, 3000);
      }
      console.log(queue);
    }
  }

  // This completes a move for the elevator (sets the current floor)
  // and either halts the elevator or continues its motion to the
  // next floor in the queue.
  function moveFloors() { 
    console.log(queue);
    current = queue.shift();
    console.log("moved to floor " + current);
    if (queue[0] !== undefined) {
      setTimeout(moveFloors, 3000);
    } else {
      isMoving = false;
    }
  }

  // this acts as a controller
  // for all events and how and what we bind them to
  function bindEvents() {
    $('.btn').on('click', getFloors);
  }
  // this runs the bind events
  // and only runs the bind events
  function init(){
    bindEvents();
  }
  // this makes the init method public for invoking
  return {
    init: init()
  };
})();

getFloors方法处理确定是否将楼层添加到队列中的逻辑，如果以前没有，现在需要，则启动电梯移动(使用setTimeout -您可能有其他类型的触发器)。moveFloors方法更新当前楼层，并根据队列的状态暂停电梯运动或将其设置为下一楼层。此解决方案使用shift将楼层从队列的前面拉出。

Codepen在这里：http://codepen.io/anon/pen/ZGzJwE?editors=101

我确信这可能需要大量的清理工作，您可能需要修改它以适应您的特定情况，但希望这是一个开始。