For loop variable increments automatically

Question

I created a for loop and runs Javascript(jquery)code in it. But somehow the for loop variable increments automatically.

for (var i=0; i<len; i++) {    //len=2
        console.log(i);  // outputs 0 and 1 as expected 
        $.ajax({
        url:'execute.php',
        method:'GET',
        data:{
            link: items[i]
        },

        success:function(data){
            console.log(i);       //outputs 2 and 2. It sould be 0 and 1
            $("#div1").html(data);
            var item = $(".sticky-item-title .title").html();
            $("#product-"+ i).html(item);
        },
        error:function(data){
            alert('error' + data);
        }
    });
}

The console.log before $.ajax shows 0 and 1 as expected (I have 2 items in len). But the console.log inside success function shows as 2 and 2. Why and where is it incremented. I tried this code

for (var i=0; i<len; i++) {
        var s=i;
        $.ajax({
        url:'execute.php',
        method:'GET',
        data:{
            link: items[s]
        },

        success:function(data){
            console.log(s);          //outputs 1 and 1. It should be 0 and 1 
            $("#div1").html(data);
            var item = $(".sticky-item-title .title").html();
            $("#product-"+ s).html(item);
        },
        error:function(data){
            alert('error' + data);
        }
    });
}

Here the variable s show 1 and 1 instead of 0 and 1.

What am I doing wrong here. Thanks in advance

read this stackoverflow.com/questions/750486/… and this stackoverflow.com/questions/11488014/… — ashish singh
– ashish singh, Commented Oct 16, 2018 at 17:06
Possible duplicate of JavaScript closure inside loops – simple practical example — rlemon
– rlemon, Commented Oct 16, 2018 at 17:09
Possible duplicate of Asynchronous Process inside a javascript for loop — aynber
– aynber, Commented Oct 16, 2018 at 17:10
For your question on why it is 2: i++ is exectued as long as i < len. As 1 is smaller then len (2) the i++ part is executed (-> i === 2) and only then the condition i < len is false and the loop stops. — Andreas
– Andreas, Commented Oct 16, 2018 at 17:17

ssc-hrep3 · Accepted Answer · 2018-10-16 17:09:26Z

1

When you use var to define a variable, you are only declaring a single variable, which is overwritten in each loop. In the asynchronous callback after the loop, the variable is then the value of the last iteration. You can circumvent this by using let or by definining a self invoking function, passing the iterating value as a parameter.

for (let i = 0; i < array.length; i++) { ... }

or

for (var i = 0; i < array.length; i++) {
   (function(i) {
   ...
   })(i);
}

answered Oct 16, 2018 at 17:09

ssc-hrep3

16.3k8 gold badges51 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andreas Over a year ago

That's the really short answer to an unasked problem (which has two very distinct duplicates already linked in the comments, hence this should be closed as such), but the question: "...inside success function shows as 2 and 2. Why and where is it incremented" is still unanswered.

Akshay Mishra · Accepted Answer · 2018-10-16 18:28:11Z

Ajax works in asynchronous manner, so the name (A)synchronous (JA)vascript and (X)ml. The method you are declaring in Ajax for success/error are just callback method references you are passing to the Ajax function. They are not called at the time the Ajax request is sent out. They are called once the response is received or not received(timeout or bad response) from the server.

What is happening in your code is that after the request is sent out, we are not receiving the response that vary moment. We are getting the response after the loop has run the second time and the var 'i' has been incremented to 2, i.e. the final value where the loop condition will be false. The browser engine receive the response of the Ajax request it then call the success or error function depending on the response. By that time, the value of 'i' variable has already been set to 2 because of which the console prints '2'.

If you want your code to print the value of the loop then you can pass the value in the function declaration as custom property like:

for (var i=0; i<len; i++) {
    console.log(i);
    $.ajax({
    url:'execute.php',
    method:'GET',
    indexVal:i,
    data:{
        link: items[i]
    },

    success:function(data){
        console.log(this.indexVal);
        $("#div1").html(data);
        var item = $(".sticky-item-title .title").html();
        $("#product-"+this.indexVal).html(item);
    },
    error:function(data){
        alert('error' + data);
    }
});

}

I did not test the code, but this should work. Please let me know if it works for you in comments.

Collectives™ on Stack Overflow

For loop variable increments automatically

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related