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

Multiple javascript timeouts - problem with live data fetching

本文关键字：数据获取 问题 实时 javascript 超时 多个      更新时间：2023-09-26

我正在构建一个实时系统(使用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秒将字段的值更改为"——"?

如果你能给我一些建议，我会很感激的。谢谢,卡罗尔。

由于您希望在每个字段的基础上指示超时，因此您有两个明显的选项:

  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"中删除最后更新的时间，我们可以确保间隔计时器不会浪费时间处理已经超时的字段。

这个回答在@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
相关文章：