如何延迟事件直到单击几个按钮

Question

在我的项目中，我想延迟事件——特别是上升或下降“楼层”或显示楼层号——直到电梯的所有按钮都被按下。

例如，如果我按 2、4、1、3，数字应按该顺序显示，向上或向下指示符应适当突出显示。

$(document).ready(function() { 
    var $buttons = $('.buttons'),
        $floorAnimate = $('.floor-animate'),
        $floorPanel = $('floor-panel'); 
 
  
  function pressButtons()
  {
    $('.floor-number').css('display', 'none');
     $buttons.click(function()
     {
        var $floorNumber = $(this).text(),
            floorOn = $('floor-number').text();
                
       $(this).addClass('pressed');
       $('.floor-number').css('display', 'block').append($floorNumber).animate({top: '-200px'}, 1500);
       $('#up-indicator').addClass('up');
     });
  }
      
  
   
 pressButtons();
});

Answer 1

看起来您需要将每个点击事件拍成一个数组并进行定时延迟以处理您想要的。我做了一些粗糙的事情来做到这一点。

http://codepen.io/anon/pen/fJcFo

我添加了一些console.logs，这样您就可以看到每个事件发生了什么。 但基本上发生的事情是：

• 在点击事件期间，html 元素文本被放入“queuedFloor”下的对象中。
• 该对象内部有两个功能，一个是按下按钮，另一个是在地板上。
• 然后将排队的楼层添加到名为 lift.queue 的数组列表中。
• 按下按钮的作用是settimeout 3 seconds，然后调用警报告诉您您在场，您可以添加您在场时的逻辑。它还调用 at floor 函数，从电梯队列中删除对象。

如果您希望 html 对象具有更大的灵活性。您可以将整个 Element 传递给 queuedFloor 对象，方法是向其添加：element:pressedItem 然后当你想引用 HTML 元素时，你可以通过它的对象引用 (elevator.queue[0].element) 调用它，并进行标准的 javascript 操作，例如：

elevator.queue[0].element.classList.add('onfloor'); 

这会为该特定元素添加一个名为“onfloor”的类。

首先我创建一个 javascript 对象：

 var elevator = elevator || {};

然后我将动作添加到我的电梯对象

 elevator.actions = {
buttonPressed:function(pressedItem){
  console.log(pressedItem);
  var queuedFloor = {
    floor: pressedItem.innerText;
    goToFloor: setTimeout(function(){
            alert("arrived at floor" + elevator.queue[0].floor); //do your html manipulation for item here, remember its async so have to reference it by its position in the queue. In this case we only ever call the item in position 0 of the array.
            elevator.queue[0].atFloor();
  }, 3000),
    atFloor: (function(){
     elevator.queue.splice(0, 1);
      console.log('queue spliced', elevator.queue);
    })

  };

  elevator.queue.push(queuedFloor);
elevator.actions.moveElevator();
}
moveElevator:function(){
  console.log('queued floors', elevator.queue);
elevator.queue[0].goToFloor();
}

}; 电梯队列 = []

然后我设置我的点击监听器

  $buttons.click(function()
 {elevator.actions.buttonPressed(this)});     

});