如何将事件延迟到单击多个按钮

How to delay events until several buttons are clicked

本文关键字：单击 按钮 迟到 延迟 事件      更新时间：2023-09-26

在我的项目中，我想推迟事件——特别是上下"楼层"或显示楼层编号——直到按下电梯的所有按钮。

例如，如果我按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();
});

看起来您需要将每个点击事件放入一个数组中，并进行定时延迟以处理您想要的内容。我做了一些粗糙的事。

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

我添加了一些console.log，这样您就可以查看每个事件中发生的情况。但本质上发生的是：

  • 在单击事件期间，html元素文本被放入"queuedFloor"下的对象中
  • 这个物体内部有两个功能，一个是按下按钮，另一个是在地板上
  • 排队的楼层随后被添加到一个名为elevator.queue的数组列表中
  • 按下按钮所做的是设置时间3秒，然后发出警报，告诉您您在楼层，您可以添加您在楼层的逻辑。它还调用at floor函数，该函数将对象从电梯队列中删除

如果您希望html对象具有更大的灵活性。您可以将整个Element传递给queuedFloor对象，方法是将其添加到其中：Element:pressedItem然后，当您想要引用HTML元素时，您可以通过其对象引用（elevate.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();
}

}；elevator.queue=[]

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

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

})；

相关文章：