The SetTimeOut function is ineffective for resetting the colour of every cell in a table

Question

The SetTimeOut function is ineffective for resetting the colour of every cell in a table

I am facing an issue with two HTML tables. The cell values in both tables are changing every 3 seconds and the background color of each cell is set based on the value from the previous cycle. Additionally, a setTimeout function is used to reset the background color of the cells after 2 seconds.

The problem I am encountering is that the setTimeout functions are only working for the last cell in the cycle.

Note: Each cell in my application has its own cycle for changing values, so the reset function for background color should work for each individual cell, not all at the same time.

I have provided an example on JsFiddle. Can anyone provide assistance with this issue?

javascript dom-events

Answer 1

Answer №1

This problem revolves around the concept of "closure in loop." While attempting to create another inner closure to incorporate the local context, the parameters were overlooked and the wrong operator (==) was used for assignment instead of comparison.

NOTE: For future reference, please ensure to include your code directly in the post rather than solely relying on a jsfiddle link. This will allow the post to be self-sufficient without the need for external references.

            _cellColorTimeouts[obj] = setTimeout((function(_cell, _obj) {
                return function() {
                    debugger;
                    _cell.css({
                        "background-color":"white",
                        "color":"black"
                    });

                    _cellColorTimeouts[_obj] = null;
                    clearTimeout(_cellColorTimeouts[_obj]);
                };
            })(cell,obj), 2000);

UPDATE: Take a look at this fiddle for reference: http://jsfiddle.net/7FXtL/10/

Answer 2

This problem revolves around the concept of "closure in loop." While attempting to create another inner closure to incorporate the local context, the parameters were overlooked and the wrong operator (==) was used for assignment instead of comparison.

NOTE: For future reference, please ensure to include your code directly in the post rather than solely relying on a jsfiddle link. This will allow the post to be self-sufficient without the need for external references.

            _cellColorTimeouts[obj] = setTimeout((function(_cell, _obj) {
                return function() {
                    debugger;
                    _cell.css({
                        "background-color":"white",
                        "color":"black"
                    });

                    _cellColorTimeouts[_obj] = null;
                    clearTimeout(_cellColorTimeouts[_obj]);
                };
            })(cell,obj), 2000);

UPDATE: Take a look at this fiddle for reference: http://jsfiddle.net/7FXtL/10/

The SetTimeOut function is ineffective for resetting the colour of every cell in a table

Answer №1

Similar questions

The loading on the Express endpoint does not cease, despite configuring the response status (Encountering problems with Multer and Express)

Encountering Issue: Exceeding the number of hooks rendered in the previous render cycle

The Node.js application is unable to locate the source file path

Guidelines for converting a number into an array of strings using JavaScript

Retrieving and storing information from a form without the need to submit it

Can someone help me figure out where I'm going wrong with the JS ternary conditional operator

Troubleshooting Problem with ListItem Alignment in Material UI v0 involving Custom Avatar Component

Error caused by MongoClient TypeError

Looking for a JavaScript snippet to insert the word "Search" into an empty DIV element with the specified id attribute

Apply CSS styles when the text exceeds the size of the textbox

angular-bootstrap-mdindex.ts is not included in the compilation result

The "loose" mode is not resolving the issue with the lack of support for the experimental syntax 'classProperties' that is currently disabled

Exploring iPhone Safari Web App: Discovering functions tailored for iPhone users

What are some effective methods for troubleshooting npm modules?

Leveraging the power of ReactJS alongside Google Tag Manager

The art of efficiently handling and outputting an array of files using node

Encountering an issue while fetching data from the server - Unable to access properties of undefined (specifically 'toString')

The contents of an array will be modified when the corresponding array that holds its value is altered

Issues with jQuery custom accordion functionality in Internet Explorer, Safari, and Chrome browsers

Most effective method for showcasing the image once it has been successfully loaded