如何延遲事件直到點擊幾個按鈕

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」投入的對象。
• 該對象內部有兩個功能，一個是按下按鈕，另一個是在地板上。
• 然後排隊的樓層被添加到名爲elevator.queue的數組列表中。
• 按下的按鈕是settimeout 3秒然後調用警報告訴你你在地板上，當你在地板上時可以添加邏輯。它還調用at樓層功能，從電梯隊列中刪除對象。

如果你想要更多的靈活性與你的html對象。您可以將整個元素傳遞給queuedFloor對象：element：pressed元素 然後，當您要引用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)});  

}）;