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;
}

• Linus Kleen: You might want to change the comparison (==) to an assignment (=) in the third from last row of the code sample. And call clearTimeout before setting the array element to null.
• afacanerman: my case does not go through clearColourOfCell.
• Pointy: Let me guess: that call to setTimeout() is in a loop, and the variable cell changes on each iteration of the loop, right?
• afacanerman: cell does not have to be changed i mean if the value changed in cycle of 500 ms i need to show the changement on cell and after 3 secs i have to clear css of changed cell to default.
• Pointy: The point is that you're setting up the timeout handler such that the handler has code that references a variable in the closure, and multiple such handlers will all reference the same variable.

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.

• afacanerman: Thanks for answer but i have wrote console.log() to print uiElemntKey out into clearColourOfCell so it prints only table Y keys i mean if the cell would be empty that'd give an error i suppose anyway i will change the code as you posted and will give info after
• Pointy: @afacanerman well the main problem is that you haven't posted enough of your code, I don't think. Exactly how does the variable "cell" get its value(s)?
• afacanerman: this is only small part of the function. Believe me it is huge and i can't post all code here. i will update my question with full function now i hope it works.