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

看起来你需要将每个click事件打到一个数组中并做一个处理你想要的定时延迟。我做了一些粗略的事情。

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

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

在on click事件期间，html元素文本被放入“queuedFloor”下的对象中。
这个对象的内部有两个功能，一个是按下按钮，另一个是在地板上。
然后将排队的楼层添加到名为elevator.queue的数组列表中。
按下的按钮是 settimeout 3秒，然后拨打警报告诉您在场，您可以在场时添加逻辑。它还调用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();
}

}; elevator.queue = []

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

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

}）;

如何在单击几个按钮之前延迟事件

1 个答案: