This is related to the scope of setTimeout, with your current code what happens is that when setTimeout gets executed it reads the last value for innerArray which points to the array of interval 10. There are 2 ways (at least) to solve this:
1) Using immediately invoked function wrapper to create a separate scope for each setTimeout with proper reference to the **innerArray** variable:
$(document).ready(function() {
var outerArray = {
0: {
0: {
url: "abc.example.com",
interval: 7
},
1: {
url: "def.example.com",
interval: 7
}
},
1: {
0: {
url: "ghi.example.com",
interval: 10
}
}
};
for (var innerArrayKey in outerArray) {
var innerArray = outerArray[innerArrayKey];
(function next(index) {
console.log("Function loop iteration " + index + " for urls with interval " + innerArray[0]["interval"]); //check
setTimeout(function(innerArray) {
return function() {
console.log("setTimeout() called for urls with interval " + innerArray[0]["interval"]); //check
$.ajax({
url: "http://xxx.yyy.xx.yy/testAsynchronousJSRequests/ajax.php",
method: "post",
data: {
innerArray: innerArray
},
success: function(dataReturned, stringStatus, jqXHR) {
console.log("Success for AJAX request for urls with interval " + innerArray[0]["interval"]); //check
next(index + 1);
},
error: function(jqXHR, stringStatus, stringExceptionThrown) {
console.log("Error in AJAX request " + innerArray[0]["interval"]); //check
}
});
}
} (innerArray), (innerArray[0]["interval"] * 1000));
})(0);
}
});
2) Using ES6 **let** keyword which creates a separate scope for each iteraion:
$(document).ready(function() {
var outerArray = {
0: {
0: {
url: "abc.example.com",
interval: 7
},
1: {
url: "def.example.com",
interval: 7
}
},
1: {
0: {
url: "ghi.example.com",
interval: 10
}
}
};
for (var innerArrayKey in outerArray) {
let innerArray = outerArray[innerArrayKey];
(function next(index) {
console.log("Function loop iteration " + index + " for urls with interval " + innerArray[0]["interval"]); //check
setTimeout(function() {
console.log("setTimeout() called for urls with interval " + innerArray[0]["interval"]); //check
$.ajax({
url: "http://xxx.yyy.xx.yy/testAsynchronousJSRequests/ajax.php",
method: "post",
data: {
innerArray: innerArray
},
success: function(dataReturned, stringStatus, jqXHR) {
console.log("Success for AJAX request for urls with interval " + innerArray[0]["interval"]); //check
next(index + 1);
},
error: function(jqXHR, stringStatus, stringExceptionThrown) {
console.log("Error in AJAX request " + innerArray[0]["interval"]); //check
}
});
}, (innerArray[0]["interval"] * 1000));
})(0);
}
});
You may check this to understand more:
[JavaScript Closures: setTimeout Inside a For Loop][1]
[1]: https://wsvincent.com/javascript-closure-settimeout-for-loop/
Opera, Safari, Firefox and Chrome now all share a set of enhanced Array methods for optimizing many common loops.
You may not need all of them, but they can be very useful, or would be if every browser supported them.
Mozilla Labs published the algorithms they and [WebKit][1] both use, so that you can add them yourself.
**filter** returns an array of items that satisfy some condition or test.
**every** returns true if every array member passes the test.
**some** returns true if any pass the test.
**forEach** runs a function on each array member and doesn't return anything.
**map** is like forEach, but it returns an array of the results of the operation for each element.
These methods all take a function for their first argument and have an optional second argument, which is an object whose scope you want to impose on the array members as they loop through the function.
Ignore it until you need it.
**indexOf** and **lastIndexOf** find the appropriate position of the first or last element that matches its argument exactly.
(function(){
var p, ap= Array.prototype, p2={
filter: function(fun, scope){
var L= this.length, A= [], i= 0, val;
if(typeof fun== 'function'){
while(i< L){
if(i in this){
val= this[i];
if(fun.call(scope, val, i, this)){
A[A.length]= val;
}
}
++i;
}
}
return A;
},
every: function(fun, scope){
var L= this.length, i= 0;
if(typeof fun== 'function'){
while(i<L){
if(i in this && !fun.call(scope, this[i], i, this))
return false;
++i;
}
return true;
}
return null;
},
forEach: function(fun, scope){
var L= this.length, i= 0;
if(typeof fun== 'function'){
while(i< L){
if(i in this){
fun.call(scope, this[i], i, this);
}
++i;
}
}
return this;
},
indexOf: function(what, i){
i= i || 0;
var L= this.length;
while(i< L){
if(this[i]=== what)
return i;
++i;
}
return -1;
},
lastIndexOf: function(what, i){
var L= this.length;
i= i || L-1;
if(isNaN(i) || i>= L)
i= L-1;
else
if(i< 0) i += L;
while(i> -1){
if(this[i]=== what)
return i;
--i;
}
return -1;
},
map: function(fun, scope){
var L= this.length, A= Array(this.length), i= 0, val;
if(typeof fun== 'function'){
while(i< L){
if(i in this){
A[i]= fun.call(scope, this[i], i, this);
}
++i;
}
return A;
}
},
some: function(fun, scope){
var i= 0, L= this.length;
if(typeof fun== 'function'){
while(i<L){
if(i in this && fun.call(scope, this[i], i, this))
return true;
++i;
}
return false;
}
}
}
for(p in p2){
if(!ap[p])
ap[p]= p2[p];
}
return true;
})();
[1]: http://en.wikipedia.org/wiki/WebKit
