javascript - 如何实现事件队列？

Question

我需要实现事件队列(=服务器上的更新)。当用户更改 slider 、按下按钮等时，新事件将添加到此队列中。每个事件将包含以下属性:

1. 设备 ID(操作将应用于服务器上的该设备)
2. Action (设置、获取等)
3. value(应该在 Action 中使用的值)

新事件应该在末尾添加。但如果已经有相同设备 ID 和相同操作的事件，则应使用新值更新此事件。我应该怎么做？

我起草了以下内容:

var inCall = false;
var queueArrayDevices = new Array();
var queueArrayActions = new Array();
var queueArrayValues = new Array();

// add call to the queue, at the end
function addAPICall(device, action, value){
    // should NOT add event here, if device and action already exists
    // should update the value instead
    queueArrayDevices.push(device);
    queueArrayAсtions.push(action);
    queueArrayValues.push(value);
}

function doAPICall(device, action, value){    
    inCall = true;
    // call server here
    // if not successful, we should add this item to the queue again
    inCall = false;
}

function callAPIQueue(){
    if(!inCall && queueArrayDevices.length > 0){
        device = queueArrayDevices.shift();
        action = queueArrayAсtions.shift();
        value = queueArrayValues.shift();
        doAPICall(device, action, value);        
    }
}

// start queue processing
setInterval(callAPIQueue, 400);

我使用 jquery mobile，它可能可以帮助我简化此类队列的创建吗？

Answer 1

如果您期望事件队列较短，那么@Martin 的解决方案是合适的。他的解决方案的时间复杂度是 O(n)，其中 n 是队列长度，如果 n 很小，这是完美的。

如果您的队列可能会变长，那么您可以考虑采用如下更快的方法。队列由将唯一标识符(device_id、action)映射到值的映射表示。这提供了对现有属性的快速查找。时间复杂度降低到 O(log n)。在 Javascript 中 map 的一个方便的实现是使用将 (device_id, action) 编码为唯一字符串的对象属性，例如“device_id#action”。此外，属性链接以提供先进/先出行为。

var Map = {
    // properties: "id#action": {value: value, next: property}
    first: "",
    last: "",
    empty: function() {return Map.first == "";},
    enque: function(device, action, value) {
        var k = device + "#" + action;
        if (k in Map) {
            Map[k].value = value;
        }
        else {
            Map[k] = {value: value, next: ""};
            if (Map.first == "") {
                Map.first = Map.last = k;
            }
            else {
                Map[Map.last].next = k;
                Map.last = k;
            }               
        }

    },
    deque: function() {
        var firstProp = Map.first;
        var key = firstProp.split("#");
        var value = Map[firstProp].value;
        Map.first = Map[firstProp].next;
        delete firstProp; // delete this property
        return {device: key[0], action: key[1], value: value};  
    }   
};

map 使用如下:

function addAPICall(device, action, value) {
    Map.enque(device, action, value);
}    
function callAPIQueue() {     
    if (!inCall && !Map.empty()) {     
        var event = Map.deque();         
        doAPICall(event.device, event.action, event.value);             
    } 
}