Javascript SetTimeOut function Does Not Work Somehow

Question

My system fatches data every 500 ms and my screen is full of html tables apart from each other . And every cell has unique key attribute. I am caching all of them anyway.

I have a global JavaScript object(_cellColorTimeouts) which contains settimeout functions for cellElements of tableRows that I mentioned above. After caching of cells, system creates timeout functions which is to wipe css out for spesific cell (in 3000ms).

In code block below uiElementKey_X and uiElementKey_Y are exact same but cached like are different. Adding unique suffix into table id makes them different. This proccess is done for row and cell items aswell.

example of _cellColorTimeouts data is

//array object keys are names of unique cell items.
_cellColorTimeouts = [uiElementKey_X_1, uiElementKey_X_2, uiElementKey_X_3,
                      uiElementKey_Y_1, uiElementKey_X_2, uiElementKey_Y_3];

. 
. //does somethings to change cell colour
.

    //after 3 seconds i need to clear css of this cell without looping the dom so i do it via cached dom.
    if (_cellColorTimeouts.hasOwnProperty(uiElementKey) && _cellColorTimeouts[uiElementKey] != null) {
         clearTimeout(_cellColorTimeouts[uiElementKey]);
         _cellColorTimeouts[uiElementKey] = null;
       }
       _cellColorTimeouts[uiElementKey] = setTimeout(function () {
               clearColourOfCell(cell);
       }, 3000);
}

function clearColourOfCell(cell) {
    cell.style.backgroundColor = cell.rowBGColour;
    cell.style.color = "black";
    _cellColorTimeouts[cell.uiElementKey] == null;
    clearTimeout(_cellColorTimeouts[cell.uiElementKey]);
}

So the problem is settimeout function is not working for the first table but second is totally fine. I have checked is there any settimeout function return id from global, yes it has. For the first table somehow it does not work. I know this question is too unique for my case but any idea will be preciated?

---- EDIT ---- FULL FUNCTION UNCUT VERSION -----

function setWidgetData(widgetId, rowId, colId, value, colIndex) {
"use strict";

// check colIndex
if (colIndex === undefined || colIndex === null) {
    colIndex = 0;
}

// loop on ui tables
var uiTables = _widgetUIElements[widgetId];
//var timeout;
for (var tableId in uiTables) {
    var uiTable = uiTables[tableId];
    var uiElementKey = tableId + "#" + rowId + "#" + colId + "#" + colIndex;
    var cellCachedObject = uiTable[uiElementKey];

    // check cell
    if (cellCachedObject == undefined) {
        //console.log("cell is undefined : " + "widgetId : " + widgetId + " - " + "rowId : " + rowId + " - " + "colId : " + colId + " - " + "colIndex : " + colIndex);
    }
    else {
        // get cell
        var cell = cellCachedObject["domElement"];
        // set sell value
        var cellValue = value;

        // is value numeric? it means we will make some conversions on value
        if (isNumeric(cellValue)) {
            var canPaint = false;
            // check cell entity
            switch (cellCachedObject["entity"]) {
                // date-time?           
                case "DATETIME":
                    // convert unix date time to readable date time
                    cellValue = new Date(fixDecimalSeparator(cellValue) * 1000);
                    cellValue = fixDateTimeDigits((cellValue.getDate())) + "/" + fixDateTimeDigits((cellValue.getMonth() + 1)) + " " + fixDateTimeDigits(cellValue.getHours()) + ":" + fixDateTimeDigits(cellValue.getMinutes());
                    break;
                // date?           
                case "DATE":
                    // convert unix date time to readable date time
                    cellValue = new Date(fixDecimalSeparator(cellValue) * 1000);
                    cellValue = fixDateTimeDigits((cellValue.getDate())) + "/" + fixDateTimeDigits((cellValue.getMonth() + 1));
                    break;
                // numeric?          
                case "NR":
                    // fix "," character in value
                    cellValue = fixDecimalSeparator(cellValue);
                    //just format the presicion
                    cellValue = number_format(cellValue, cellCachedObject["precision"], '.', ',');
                    canPaint = true;
                    break;
                // other?           
                default:
                    // fix "," character in value
                    cellValue = fixDecimalSeparator(cellValue);
                    // if cell is number, no entity conversion
                    // entity convertion
                    cellValue = entityConverter(cellCachedObject["entity"], cellCachedObject["entityTo"], cellValue);
                    cellValue = new Number(cellValue).toFixed(cellCachedObject["precision"]);

                    // if widget currency is not USD. it means user selected currency from currency list or default user currency
                    if (cellCachedObject["isConvertable"]) {
                        // this scoop is not active with the new xml. if FOREX1 widget entity is RECIPCUR but never should not be
                        if (cellCachedObject["widgetIsFOREX1"]) {
                            cellValue = _currencyConverter.convertTrend(cellValue, cellCachedObject.currencyValueType, cellCachedObject["currencyTo"], cellCachedObject["rowId"], cellValue);
                        }
                        else {
                            cellValue = _currencyConverter.convert(cellValue, cellCachedObject["currency"], null, cellCachedObject["precision"]);
                        }
                    }
                    canPaint = true;
            }

            // if it is not date time
            if (canPaint) {
                // get current value of cell
                var currentValue = cell.getAttribute("currentValue");
                // check current value of cell make them coloured.
                if (currentValue !== undefined) {
                    // new value is bigger than old value
                    var newVal = parseFloat(value);
                    var oldVal = parseFloat(currentValue);
                    var rowBGColour = cellCachedObject["rowBGColor"];
                    cell.rowBGColour = rowBGColour;
                    cell.uiElementKey = uiElementKey;
                    if (newVal > oldVal) {
                        //cell.css({ "background-color": "Green", "color": "White" });
                        cell.style.backgroundColor = "green";
                        cell.style.color = "white";
                    }
                    // new value is smaller than old value
                    if (newVal < oldVal) {
                        //cell.css({ "background-color": "Red", "color": "White" });
                        cell.style.backgroundColor = "red";
                        cell.style.color = "white";
                    }
                    if (_cellColorTimeouts.hasOwnProperty(uiElementKey) && _cellColorTimeouts[uiElementKey] != null) {
                        clearTimeout(_cellColorTimeouts[uiElementKey]);
                        _cellColorTimeouts[uiElementKey] = null;
                    }
                    _cellColorTimeouts[uiElementKey] = setTimeout(function () {
                        return function () {
                            clearColourOfCell(cell);
                        };
                    } (cell), 3000);
                    newVal = oldVal = rowBGColour = null;
                }
                currentValue = null;
            }
            canPaint = null;

            // set new value as a current value
            cell.setAttribute("currentValue", value);
        }

        cell.innerHTML = '';
        cell.innerHTML = cellValue;

        cellValue = null;
    }

    uiTable = uiElementKey = cellCachedObject = null;
}

uiTables = null;
}

Answer 1

You didn't post enough code for me to know for sure that this is the problem, but it's a good bet:

   _cellColorTimeouts[uiElementKey] = setTimeout(function () {
      return function() {
           clearColourOfCell(cell);
      };
   }(cell), 3000);

By setting up the timeout handler like that, you ensure that the handler has its own private copy of that "cell" variable, so that no matter how "cell" is changed before the handler is finally invoked, that copy will retain the correct value.