This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
Closed 1 year ago.
I've never had to use callback functions before, so I may have made a completely stupid mistake. I think I somewhat understand the problem here, but not how to solve it.
My code (a bit simplified) is:
for (var i = 0; i < some_array.length; i++) {
var title = some_array[i];
$.getJSON('some.url/' + title, function(data) {
do_something_with_data(data, i);
}
Now as far as I understand, this anonymous function will only be called if getJSON() has received the data. But by this point, i does not have the value I would require. Or, as far as my observation goes, it has the last value it would have after the loop is done (shouldn't it be out of bounds?).
As a result, if the array had a size of 6, do_something_with_data() would be called five times with the value 5.
Now I thought, just pass i to the anonymous function
function(data, i) { }
but this does not seem to be possible. i is undefined now.
You need to understand what a closure is. In JavaScript, there are certain rules about the scope of each variable.
The scope for variables declared implicitly or with var is the nearest/current function (including "arrow functions"), or if not in a function, then the window or other global object appropriate for the execution context (e.g., in Node, global).
The scope for variables declared with let or const (in ES5 and up) is the nearest statement block { /* not an object, but any place that will take executable statements here */ }.
If any code can access a variable in the current scope or in any parent scope, this creates a closure around that variable, keeping the variable live and keeping any object referred to by the variable instantiated, so that these parent or inner functions or blocks can continue to refer to the variable and access the value.
Because the original variable is still active, if you later change the value of that variable anywhere in the code, then when code with a closure over that variable runs later it will have the updated/changed value, not the value when the function or scope was first created.
Now, before we address making the closure work right, note that declaring the title variable without let or const repeatedly in the loop doesn't work. var variables are hoisted into the nearest function's scope, and variables assigned without var that don't refer to any function scope get implicitly attached to the global scope, which is window in a browser. Before const and let existed, for loops in JavaScript had no scope, therefore variables declared within them are actually declared only once despite seeming to be (re)declared inside the loop. Declaring the variable outside the loop should help clarify for you why your code isn't working as you'd expect.
As is, when the callbacks run, because they have a closure over the same variable i, they are all affected when i increments and they will all use the current value of i when they run (which will as you discovered be incorrect, because the callbacks all run after the loop has completely finished creating them). Asynchronous code (such as the JSON call response) does not and cannot run until all synchronous code finishes executing--so the loop is guaranteed to complete before any callback is ever executed.
To get around this you need a new function to run that has its own scope so that in the callbacks declared inside of the loop, there is a new closure over each different value. You could do that with a separate function, or just use an invoked anonymous function in the callback parameter. Here's an example:
var title, i;
for (i = 0; i < some_array.length; i += 1) {
title = some_array[i];
$.getJSON(
'some.url/' + title,
(function(thisi) {
return function(data) {
do_something_with_data(data, thisi);
// Break the closure over `i` via the parameter `thisi`,
// which will hold the correct value from *invocation* time.
};
}(i)) // calling the function with the current value
);
}
For clarity I'll break it out into a separate function so you can see what's going on:
function createCallback(item) {
return function(data) {
do_something_with_data(data, item);
// This reference to the `item` parameter does create a closure on it.
// However, its scope means that no caller function can change its value.
// Thus, since we don't change `item` anywhere inside `createCallback`, it
// will have the value as it was at the time the createCallback function
// was invoked.
};
}
var title, i, l = some_array.length;
for (i = 0; i < l; i += 1) {
title = some_array[i];
$.getJSON('some.url/' + title, createCallback(i));
// Note how this parameter is not a *reference* to the createCallback function,
// but the *value that invoking createCallback() returns*, which is a function taking one `data` parameter.
}
Note: since your array apparently only has titles in it, you could consider using the title variable instead of i which requires you to go back to some_array. But either way works, you know what you want.
One potentially useful way to think about this that the callback-creating function (either the anonymous one or the createCallback one) in essence converts the value of the i variable into separate thisi variables, via each time introducing a new function with its own scope. Perhaps it could be said that "parameters break values out of closures".
Just be careful: this technique will not work on objects without copying them, since objects are reference types. Merely passing them as parameters will not yield something that cannot be changed after the fact. You can duplicate a street address all you like, but this doesn't create a new house. You must build a new house if you want an address that leads to something different.
You could create a closure using an immediate function (one that executes right away) that returns another function:
for (var i = 0; i < some_array.length; i++) {
var title = some_array[i];
$.getJSON('some.url/' + title, (function() {
var ii = i;
return function(data) {
do_something_with_data(data, ii);
};
})());
}
If you can modify the service at some.url, it would be much better if rather than making a separate HTTP request for each item in some_array, you simply passed every item in the array in a single HTTP request.
$.getJSON('some.url', { items: some_array }, callback);
Your array will be JSON serialized and POSTed to the server. Assuming some_array is an array of strings, the request will look like this:
POST some.url HTTP/1.1
...
{'items':['a','b','c', ... ]}
Your server script should then deserialize the JSON request from the request body and loop over each item in the items array, returning a JSON-serialized array of responses.
HTTP/1.1 200 OK
...
{'items':[{id:0, ... }, {id:1, ... }, ... ]}
(Or whatever data it is you're returning.) If your response items are in the same order as the request items, it is easy to piece things back together. In your success callback, simply match the item index with some_array's index. Putting it all together:
$.getJSON('some.url', { items: some_array }, function(data) {
for (var i = 0; i < data.items.length; i++) {
do_something_with_data(data.items[i], i);
}
});
By 'batching up' your requests into a single HTTP request like this, you'll significantly improve performance. Consider that if each network round-trip takes at least 200ms, with 5 items, you're looking at a minimum 1 second delay. By requesting them all at once, network delay stays a constant 200ms. (Obviously with larger requests, server script execution and network transfer times will come in to play, but performance will still be an order of a magnitude better than if you issue a separate HTTP request for each item.)
Create N closures and pass in the value of 'i' each time, like so:
var i, title;
for (i = 0; i < some_array.length; i++) {
title = some_array[i];
$.getJSON('some.url/' + title, (function(i_copy) {
return function(data) {
do_something_with_data(data, i_copy);
};
})(i));
}
I think some browsers have trouble with making multiple asynchronous calls at the same time, so you could make them one at a time:
var i;
function DoOne(data)
{
if (i >= 0)
do_something_with_data(data, i);
if (++i >= some_array.length)
return;
var title = some_array[i];
$.getJSON('some.url/' + title, DoOne);
}
// to start the chain:
i = -1;
DoOne(null);
I had exactly the same issue as the OP but solved it a different way. I replaced my JavaScript 'for' loop with a jQuery $.each which for each iteration calls a function which I think gets over the callback 'timing' issue. And I combined my external data arrays into a JavaScript object so that I could reference both the parameter I was passing on the JSON URL and the other field in the same element of that object. My object elements came out of a mySQL database table using PHP.
var persons = [
{ Location: 'MK6', Bio: 'System administrator' },
{ Location: 'LU4', Bio: 'Project officer' },
{ Location: 'B37', Bio: 'Renewable energy hardware installer' },
{ Location: 'S23', Bio: 'Associate lecturer and first hardware triallist' },
{ Location: 'EH12', Bio: 'Associate lecturer with a solar PV installation' }
];
function initMap() {
var map = new google.maps.Map(document.getElementById('map_canvas'), {
center: startLatLon,
minZoom: 5,
maxZoom: 11,
zoom: 5
});
$.each(persons, function(x, person) {
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=' + person.Location, null, function (data) {
var p = data.results[0].geometry.location;
var latlng = new google.maps.LatLng(p.lat, p.lng);
var image = 'images/solarenergy.png';
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: image,
title: person.Bio
});
google.maps.event.addListener(marker, "click", function (e) {
document.getElementById('info').value = person.Bio;
});
});
});
}
Related
I have the weirdest problem with my code and I don't know how to solve it. I have an array of objects which I would like to loop through and match the variable dossiernummer to the selected dossiernummer to extract the zipcode of the object. This is all a bit too much for one question and I am certain I can code this, but my array seems empty whenever I add a loop!
My code:
$('select[name=company]').on('change', function() {
// The selected `dossiernummer`
console.log($(this).val());
// The array of `Objects`
console.log(results);
geocodeAddress(geocoder, map, address);
});
When using the Chrome console, I can see the filled array of objects, so I am 100% sure that the data is there! I also checked the variables, and it all matches:
But! Now I would like to loop through the array of objects:
$('select[name=company]').on('change', function() {
for (var j = 0; j < results.length; j++){
if (results[j]['dossiernummer'] == $(this).val()){
var address = results[j]['postcode']
}
}
geocodeAddress(geocoder, map, address);
});
This gives the following error in my console:
I am not advanced with JavaScript, so this error is probably very silly but I can't figure it out. Help is much appriciated!
Edit:
The data is coming from an API to fill a Select2
params.page = params.page || 1;
var results = [];
if(data.totalItemCount > 0){
$.each(data._embedded.rechtspersoon, function(i, v) {
v.id = v.dossiernummer ;
// console.log(v);
if(v.actief == 1){
results.push(v);
}
});
// the code function which i described ->
KvkGoogleMaps(results);
}
return {
results: results,
pagination: {
more: (params.page * 30) < data.totalItemCount
}
};
The problem is your results array is undefined. I cannot tell you exactly how to fix this, since you've only given us a snippet without context.
This problem of yours seems to be due to the fact that JavaScript has lexical scope, something similar to dynamic scope. If you call a function, the scope in that function is different than the scope in the parent from which it was called from. Therefore, it could be possible that scope from the called function (the anonymous one in your example) cannot access the results array from the parent.
It would be helpful if you posted more of your code in order to be able to tell you the exact problem.
More about JavaScript lexical scope.
I'm creating an angular app using angular-google-maps. What I'm trying to do is loop through an array of locations in order to place a marker at each location's latitude and longitude. However, because I'm using a couple of closures within my for-loop, a marker is only showing up at the last entry of the array. Here's the code:
$scope.petMarkers = [];
$http.get('/api/pets').success(function(foundPets){
$scope.foundPets = foundPets;
var listOfPets = $scope.foundPets;
var markerCreator = function(arrayOfPets){
for (var i = 0; i < arrayOfPets.length; i++){
var singlePet = arrayOfPets[i];
var petName = arrayOfPets[i].name;
var identity = singlePet._id;
var location = singlePet.addressFound;
var split = location.split(' ');
var joined = split.join('+');
var httpAddress = 'http://maps.google.com/maps/api/geocode/json?address=' + joined + '&sensor=false';
// anonymous function keeps reference to i, and when console.log is called, for loop has already finished and value of i is set to 4
$http.get(httpAddress).success(function(mapDataAgain){
var ladder = mapDataAgain.results[0].geometry.location.lat;
var longer = mapDataAgain.results[0].geometry.location.lng;
var obj = {
latitude: ladder,
longitude: longer,
title: petName,
id: i
};
$scope.$watch(function(){
console.log('we are in scope.watch');
return $scope.map.bounds;
}, function(){
var markers = [];
//markers.push(obj);
$scope.petMarkers.push(obj);
//$scope.petMarkers = markers;
console.log('markers = ', $scope.petMarkers);
}, true);
});
};
};
markerCreator(listOfPets);
});
Any ideas as to how to use an immediately invoked function expression(IIFE) with this code? I'm having trouble figuring out whether I need two IIFEs (one for the anonymous function called upon success of the $http call and one for the anonymous function called as the argument to $scope.$watch). I'm kind of lost here, so any explanation/help/suggestions would be helpful.
You don't need a for loop, and you certainly don't need an IIFE. You have an array of results, so just call the native .forEach function. It takes a callback that can is executed on all elements in the array. Benefits of this approach:
Gives you closure by default. The callback has its own scope and in a way is self-contained and separate from other code. Each element will get its own marker
Makes your code much easier to read. This is a much too often overlooked detail in coding. You want to strive to avoid any sort of technical debt—one of the easiest ways to do this is use the native array methods. They clearly communicate your code's intentions & makes debugging a lot easier (esp. necessary when asking for help, say on stack overflow, as it takes a lot of time and not many people want to help you if they can't make sense of your code)
The Situation
I need to loop through an array, and run a tween based on each item's value. Thus, for each item in the array, there must be a separate Tween instance. According to the TweenJS documentation, the get() method "Returns a new tween instance".
The Problem
It appears as though there is only a single instance when running a new tween for each item in the array inside a for loop
The Code
HTML
<div id='log'></div>
Javascript
var items = [3,6,2,8,9,6];
var log = document.getElementById('log');
for(var i = 0; i < items.length; i++){
var item = items[i];
var start = {
x: item * 10,
y: item * 15
};
var end = {
x: item * 10,
y: item * 30
};
createjs.Tween
.get(start, {
onChange: function () {
log.innerHTML = log.innerHTML + i + " - " + JSON.stringify(start) + "<br/>";
}
})
.to(end, 1000)
};
The Demo
http://codepen.io/anon/pen/pilAL - Notice the output. The number at the beginning is the index of the current array's value. It only shows the last item.
Ideally...
Ideally, each item in the array would tween separately between its values.
Thanks in advance!
The quick-and-dirty solution is to use the "event" argument in onChange, and inspect its target.target property.
The trick is that it is properly firing for everything, but the variable scoping is such that i and start no longer contain the values you seek by the time the event method fires.
Here it is with that change: http://codepen.io/anon/pen/FhsHz
Aye, as I expected, it's coming from a lexical scoping issue... I had to refresh myself on it, as it's a while since I've had to deal with Javascript in such a way (and thus worry about it!)
Read through this guide, it's very insightful and starts to address your issue and ways to work around it in the subsection "Creating closures in loops":
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures
The gist is that, if you want that anonymous function you create to use the values captured upon creation of the function, you have to get the scoping of the variable you end up using into such a state that it actually is pointing to the desired value.
It's annoying, and they really should provide a more intuitive parameter to you than "event.target.target" as a place to get the value you seek, but the alternative to that is to do something like what they do in this example and essentially make a function generating function, into which you pass the variable. At that point, the scope of the variable that the function uses becomes the scope of the passed-in argument in the "generating function", and it will be pointing to the proper value. Y u c k.
As part of the web app I'm building, multiple commands can come in from the server at once.
When these commands are processed, data will tend to be updated and then fairly heavy page HTML generation can occur.
At the moment when multiple similar commands come in, the program will process the data, then parts of the page are regenerated each time. This can lead to a lot of wasted processing time.
As such, I'm trying to make a callstack, so when a command is processed it looks to see if the function that the command triggers is in the stack and if it isn't found it adds it.
My problem is with keeping the called function from the callstack in the correct scope while also being able to eliminate duplicates.
Base Code:
var tools = {
functions:{
function1: function(){
return this;
},
function2: function(){
}
},
unique: function(arr){
var returnArr=[],
x, i;
for (x=0; x<arr.length; x++){
for (i=(x+1); i<arr.length; i++){
if (arr[x]===arr[i]){
arr.splice(i, 1);
}
}
returnArr.push(arr[x]);
}
return returnArr;
}
}
Example 1:
var callstack=[tools.functions.function1, tools.functions.function1];
callstack = tools.unique(callstack);
for (var x=0; x<callstack.length; x++){
console.log(callstack[x](), "should equal tools.functions");
}
This fails as "this" will return [function()]
Example 2:
var callstack=[
(function(){return tools.functions.function1()}),
(function(){return tools.functions.function1()})
];
callstack = tools.unique(callstack);
for (var x=0; x<callstack.length; x++){
console.log(callstack[x](), "should equal tools.functions");
}
This fails because you can't ensure that the functions are unique, so it'll still run the function twice.
This can be worked around by using two arrays (one that keeps track of the names of the functions, one that holds the encapsulated functions) and keeping them in sync, but I can't help but feel there must be a cleaner way using .call but I can't see it.
JSFiddle: http://jsfiddle.net/Kj6E8/
Generically speaking it is impossible to preserve the value of this in the way that you require. As soon as you push those functions into the array, the object that those functions once resided on is lost.
If you are only calling functions on a single object, you need to bind your functions to that object in some way. There are many ways of doing that, for example, you could pass the object to bind those function to in your unique function.
http://jsfiddle.net/8WAZb/1/
var tools = {
functions:{
function1: function(){
return this;
},
function2: function(){
}
},
unique: function(arr, o){
var returnArr=[],
x, i;
for (x=0; x<arr.length; x++){
for (i=(x+1); i<arr.length; i++){
if (arr[x]===arr[i]){
arr.splice(i, 1);
}
}
returnArr.push(this.bind(arr[x], o));
}
return returnArr;
},
bind: function(f, o) {
return function () {
return f.apply(o, arguments);
}
}
}
console.info("Example 1:");
var callstack=[tools.functions.function1, tools.functions.function1];
callstack = tools.unique(callstack, tools.functions);
console.log("Callstack:",callstack);
for (var x=0; x<callstack.length; x++){
console.log(callstack[x](), "should equal tools.functions");
}
How and when you infer the value of this really depends on when you have that object in scope. Presumably you are more likely to have that object in scope during the callstack creation phase, and perhaps not necessarily at the point where you wish to invoke the functions in the callstack. If that is the case, binding as early as possible (i.e. during the reduction to a unique callstack as demonstrated) seems like a sensible option.
In JavaScript, this is defined from the outside caller, so when you do:
callstack[x]()
You are bringing the window scope into the functions. If you want to bring in the tools.functions object, you need to do:
callstack[x].call(tools.functions);
http://jsfiddle.net/Yv4sM/
I am trying to utilize Google's AJAX Language API to translate each value in an array.
for(var n=0; n < mytext.length; n++) {
google.language.translate(mytext[n], originalLanguage, newLanguage, function(result){
if(!result.error){
document.getElementById("caption") += mytext[n]+" has been translated to "+result.translation;
}
})
}
This correctly translates the entire array, but in the success function called by google.language.translate, n is always equal mycaptions.length. This results in mycaptions[n] returning as undefined (e.g., " has been translated to Hola"). This has been bewildering me for days (why is the value of n inside the callback function always as if you are at the end of the loop???), and I am guessing the answer lies in an obvious bit of programming I just don't get.
This has to do with how closures work in JavaScript; when JavaScript creates a closure, any variables that get used are referenced, rather than copied, so when you construct the anonymous function, it stores a reference to n rather than copying the value of n. Hence, when it actually gets called, it runs with the current value of n (which is the value that gets assigned to it at the end of the loop). The workaround is to create a function that takes a parameter n and returns a closure:
function createSuccessFunction(n) {
return function() {
// behavior on success
};
}
// use createSuccessFunction(n) where you need a callback