多个 javascript 超时 - 实时数据获取问题

Question

我正在构建一个实时系统，该系统（使用 websockets）使用不同频率的实时数据更新表（可以是每秒 3 次，可以是每 2 秒一次 - 取决于数据类型） . 我目前正在努力寻找一种方法来让用户知道在过去 5 秒内何时未更新特定字段。也就是说，如果没有获取新数据，我不应该将旧值保留在那里，而是将其更改为“--”或类似的东西。

经过很长一段时间的javascript，更新字段的最终函数看起来像这样（非常简化）：

function changeValue(data){
        var fieldId= data.fieldId;
        var value = Math.round(data.value);
        $('span#'+fieldId).text(value);
}

每次需要更改字段时都会调用此函数。我有 2 到 40 个不同的字段（取决于用户）被更改。

如果没有进行更新，设置计时器以每 5 秒将字段的值更改为“--”的最佳方法是什么？

我会非常感谢一些提示， 谢谢， 卡罗尔。

Answer 1

由于您想在每个字段的基础上指示超时，您有两个明显的选择：

1. 有一个全局间隔计时器，该计时器相当频繁地计时，并查看您的所有字段是否超时。
2. 每个字段都有独立的计时器，只处理该字段。

我认为总的来说我更喜欢 (1) 到 (2)，因为那时我们只处理一个间隔计时器，它使管理更简单。

由于文档中的 ID 必须是唯一的，我们可以使用您的字段 ID 值作为哈希（对象）中的键来存储上次更新时间。这是对先前答案的一种旋转，但适用于每个字段。以下是我们如何设置最后更新时间：

var lastUpdatedTimes = {};

function changeValue(data){
        var fieldId= data.fieldId;
        var value = Math.round(data.value);
        $('span#'+fieldId).text(value);
        lastUpdatedTimes[fieldId] = new Date().getTime();
}

然后你设置一个间隔计时器来检查它们中的每一个。

function checkFieldsForTimeout(){
        var now = new Date.getTime();

        // For each ID in lastUpdatedTimes, see if 'now minus
        // last updated' is > 5000 and is so, set the field
        // text to '--' and remove that entry from the last
        // updated list with "delete lastUpdatedTimes[itemId]".
}

如果超时字段恢复活力，“--”将再次被一些真实文本替换。

每当我们将“--”放入字段时，通过从“lastUpdatedTimes”中删除最后更新时间，我们确保间隔计时器不会浪费时间处理已超时的字段。

Answer 2

此答案已扩展以在@Andrew 发表评论后处理多个字段（另请参阅他的答案）。

在每个数据中引入一个属性updatedTime，它保存数据最后一次更新的时间。定期计时器检查updatedTime 的所有数据并在适当时更新文本字段。检查的频率必须是检测周期的两倍。您的函数 changeValue() 会更新 updatedTime 和文本字段。

function checkData() {
    var now = new Date.getTime();
    for "each data" {
        if (now - data.updatedTime >= 5000) {
            var fieldId = data.fieldId;                      
            $('span#'+fieldId).text('--');
        }            
    }
}
function changeValue(data) {              
     var fieldId = data.fieldId;              
     var value = Math.round(data.value);              
     $('span#'+fieldId).text(value);
     data.updatedTime = new Date.getTime();      
}
// Install periodic timer to check last updates:
setInterval(checkData, 5000 / 2);   // interval = half the required detection period