Question

I am building a real-time system which (with a use of websockets) updates a table with live data of different frequencies (can be 3 times per second, can be once every 2 seconds – dependant on the type of data).
I am currently struggling to find a way of letting the user know when a particular field has not been updated in the last 5 seconds. That is, if no new data is fetched, I shouldn’t keep the old value there, but rather change it to ‘–‘ or something similar.

After a long way to the javascript, final function which updates fields looks like that (extremely simplified):

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

This function gets called each time a field needs to be changed. I’ve got between 2 and 40 different fields (dependant on the user) that are changed.

What is the best way of setting timers in order to change the values of the fields to ‘–‘ every 5 seconds, if no update has been made?

I would be really grateful for some tips,
Thanks,
Karol.

Answer 1

Since you want to indicate timeout on a per-field basis, you have two obvious options:

1. Have a global interval timer that ticks over fairly frequently and looks through all of your fields for a timeout.
2. Have independent timers for each field which just deal with that field.

I think on balance I prefer (1) to (2), because we’re only dealing with one interval timer then and it makes the housekeeping simpler.

Since IDs in documents must be unique, we can use your field ID values as a key in a hash (an object) to store last updated times. This is kind of a spin on the previous answer but works on a per-field basis. So here’s how we’d set those last updated times:

var lastUpdatedTimes = {};

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

Then you set up an interval timer to check each of them.

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]".
}

Should a timed-out field spring back to life, the “–” will be replaced by some real text again.

By deleting the last updated time from “lastUpdatedTimes” whenever we put “–” into a field, we make sure that the interval timer isn’t wasting time processing fields that have already been timed out.