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时，splice你从queue到达的楼层开始移动到阵列中的下一个目的地。

重复直到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

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

Answer 4

也许您想使用一些更高级的数据结构，以便更轻松地添加和删除元素。如果这是你的斗争（？）：）

潜在的一些链接列表

Javascript电梯计划

的JavaScript

4 个答案: