JSFiddle - React, Tailwind, and code Playground

by NickU

HTML

<div style='position:absolute' id="my_id">div</div>

JavaScript

var points = [13, 8, 5];
for(var pointIdx=0; pointIdx < points.length; pointIdx++) {
    //..
    //..

    // animate move.        
    //close over pointIdx
    (function(pointIdx){
    //now the execution context is inside of the anonymous function
    //and the value of pointIdx in the loop is stored in
    //variable pointIdx (same name for consistency) is at the top of that variable environment
    $('#my_id').animate({ left: "50px" ,top:  "50px" }, 1500, 'linear', 
        function() {
            console.log("Animation: Iteration=" + pointIdx); // pointIdx will now contain the iteration value from the for loop
           //...
           //...
        }
    )
    })(pointIdx);
}