Skip to main content

More Closure Fun!

So earlier today I got some more experience with closures. I had a loop that triggered multiple asynchronous server requests and I needed to keep track of the loop counter with respect to the iteration in which the request was made.
for (var i = 0; i < 4; i++){
  window.setTimeout(function(){alert(i);}, 0);
}
The code above will alert the number 4 a total of 4 times. I thought I could be tricky. Maybe, if I set it equal to a different variable that gets declared with 'var' in each iteration, that var will create a new variable in memory and the closure will close over each one respectively.
for (var i = 0; i < 4; i++){
  var cur = i;
  window.setTimeout(function(){alert(cur);}, 0);
}
No dice. This code will alert the number 3 a total of 4 times. The JS engine apparently doesn't close around a particular state but just keeps track of the variables in the parent functions. Whatever they are when the function gets called, that's what you'll get.
So, what's a programmer to do? Create another scope block!
for (var i = 0; i < 4; i++){
  function forScope(){
    var cur = i;
    window.setTimeout(function(){alert(cur);}, 0);
  }
  forScope();
}
Because a new instance of forScope gets created in each loop iteration, all of the alerts will get their own appropriate version of 'cur' thus you will receive the alerts 0, 1, 2, and 3 like we want.

Comments

Popular posts from this blog

Quick Deepstream.io Setup Using JSPM

Cross post from my employer's development blog: http://rootinc.github.io/2016/02/12/deepstream-jspm/
Want to use JSPM rather than Bower for running the Deepstream.io example? Follow these steps. This is basically a duplicate of the [Getting Started tutorial][tutorial] on the [Deepstream.io website][website] but using a really simple JSPM setup. This is a very crude guide where I list everything I had to do to get things running.

Create an empty project folder npm install deepstream.io Copy server code verbatim from the Getting Started guide jspm install npm:deepstream.io-client-js Hit enter for all the prompts from JSPM

We’re going to modify the client side code a little bit. We have native support for ES6 compiling with JSPM/Babel so we can import the Deepstream client directly:

import deepstream from 'deepstream.io-client-js'; let ds = deepstream( 'localhost:6020' ).login();

let record = ds.record.getRecord( 'someUser' );

let input = document.querySelector( 'inp…

Atari E3 2004 PAL digital press kit

Making note of some old swag. The Atari E3 2004 PAL digital press kit. See video for details.






Fancy FTP Deployment with Grunt

I recently dove into Grunt.js at work for automating our build process and I haven’t looked back. It’s an awesome tool with a plug-in for just about anything. I expected the usual would be there like JavaScript minification and concatenation, but I was surprised at a few others that I found, one being for FTP file deployment. Just shows how popular and community supported Grunt is.

There are a few FTP plug-ins available for Grunt. I didn’t do an analysis of all of them but ran across grunt-ftp-push which seemed to do what I needed so I decided to try it out. A simple ftp-push setup to upload an entire project via FTP could look like this:

grunt.initConfig({ftp_push:{all:{options:{host:'example.com',port:21,dest:'/project/path/',username:'user',password:'pass'},expand:true,cwd:'dist',src:['**/*','!**/*.zip']}}});
Some details here: I opted to put the username and password in the main config rather than using an .ftpauth file. The …