Question

I have a for loop and I am doing path finding. It works! However, when I click on the map, it goes way to fast. How do I slow down what’s going on inside the for loop to like say… a second between every loop?

    for (i = 0; i < result.length; ++i) {

        var getCoords = new String(result[i]);
        var finalCoords = getCoords.split(",");
        var finalX = finalCoords[0];
        var finalY = finalCoords[1];

        currX = parseInt(x_block);
        currY = parseInt(y_block);

        moving = true;

        realSpawnX = finalX * 32;
        realSpawnY = finalY * 32;

        context.drawImage(playerImg, realSpawnX, realSpawnY, 32, 32);
    }

Answer 1

function loop(i) {
  ++i;

  your code

  if (i < result.length) {setTimeout("loop("+i+")", 1000); }
}

at some point start loop:

loop(0);

Update:

example on jsfiddle

Update 2:

define helper function loop

function loop(i, result_length, payload) {
  if (i < result_length) {
    payload(i);
    ++i;          
    setTimeout(function() {loop(i, result_length, payload);} , 2000);
  }
}

then call like this on position of the original loop:

         loop(0, result.length, function(i) {
                getCoords = new String(result[i]);
                finalCoords = getCoords.split(",");
                finalX = finalCoords[0];
                finalY = finalCoords[1];

                currX = parseInt(x_block);
                currY = parseInt(y_block);

                moving = true;

                realSpawnX = finalX * 32;
                realSpawnY = finalY * 32;
                context.drawImage(playerImg, realSpawnX, realSpawnY, 32, 32);
                console.log("Step taken...");
          });