Failure to achieve closure - even after thorough study of the concept

Question

Failure to achieve closure - even after thorough study of the concept

I have a countdown that I'm trying to get working during onload, but I'm running into issues with closures. Here is my code:

Check out the fiddle here

for (var o in myDates) {
  var myDate = myDates[o];
  var iid = o;
  funcs[o] = function() {
    var dateFuture = new Date();
    dateFuture.setSeconds(dateFuture.getSeconds()+myDate.durationInSecs);
    GetCount(dateFuture,iid);    
  }
  myDates[iid].tId = setTimeout("funcs['"+iid+"']()",myDates[o].delay*1000);
}

The above code is not working as expected due to implicit eval and use of global variables. Below is the workaround that does work, but I want to avoid the global vars and make it more efficient:

<html>
<head>
<script type="text/javascript">

// JavaScript code goes here...

</script>
</head>
<body>
<div>
<span id="d0" style="background-color:red">!!</span>
<span style="float:right¨;background-color:green" id="d1">??</span>
</div>
</body>

javascript closures

Answer 1

Answer №1

Do not fall into the trap of declaring a closure inside a loop. The inner function will close over the variable myDate, not its value. This can be unexpected since variables in JavaScript have function scope.

To work around this issue, create a closure-maker function that allows you to create a new instance of the variable to close over whenever needed.

INCORRECT

var i;
for(i=0; i<xs.length; i++){
    something = function(){
        f(i);
    };
}
//all closures share the i variable and will have it
//be i=xs.length in the end. We don't want that.

CORRECT

function make_handler(i){
    return function(){
        f(i);
    };
    //each call gets its own copy of i
}
var i;
for(i=0; i<xs.length; i++){
    something = make_handler(i);
}

Alternatively, inline the closure-maker function like this:

var i;
for(i=0; i<xs.length; i++){
    something = (function(i){
        return function(){
            f(i);
        };
    }(i));
}

Answer 2

Do not fall into the trap of declaring a closure inside a loop. The inner function will close over the variable myDate, not its value. This can be unexpected since variables in JavaScript have function scope.

To work around this issue, create a closure-maker function that allows you to create a new instance of the variable to close over whenever needed.

INCORRECT

var i;
for(i=0; i<xs.length; i++){
    something = function(){
        f(i);
    };
}
//all closures share the i variable and will have it
//be i=xs.length in the end. We don't want that.

CORRECT

function make_handler(i){
    return function(){
        f(i);
    };
    //each call gets its own copy of i
}
var i;
for(i=0; i<xs.length; i++){
    something = make_handler(i);
}

Alternatively, inline the closure-maker function like this:

var i;
for(i=0; i<xs.length; i++){
    something = (function(i){
        return function(){
            f(i);
        };
    }(i));
}

Failure to achieve closure - even after thorough study of the concept

Answer №1

Similar questions

Error encountered during execution of Angular application, specifically TS2305 error?

Searching for values in JSON using jQuery's autocomplete feature

Failing to utilize callback functions results in forgetting information

React - Render an element to display two neighboring <tr> tags

Troubleshooting: Issue with AngularJS ng-click functionality within Modal

Issues arise when using the select element

Exploring the Implementation of Conditional Logic Using Variables in ReactJS

Transform the angular code in order to execute innerHTML functions

Stopping the Bootstrap carousel when an input is focused

Deactivate the node-xmpp client

Traversing through asp:GridView information with javascript

What is the best way to implement a Fibonacci sequence using a for...of loop?

What is the best way to restrict the input year on @mui/x-date-pickers to a certain range?

Unable to switch checkbox state is not working in Material UI React

What is the best way to design a drop-down suggestion list similar to Google's?

What is the best way to upload my React project to GitHub without adding the node modules directory?

How can one utilize Codemirror code folding while avoiding the use of "[ ]"?

Why does socket.io have trouble connecting when clients are using different IP addresses on separate wifi networks?

Keep the websocket connection continuously open

Unusual problem arises with styling and element measurement (scrollWidth / scrollWidth) in Gatsby framework