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），因为我们只处理一个间隔计时器，这样可以简化家务管理。

由于文档中的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

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

2 个答案: