When I use setTimeout inside of a for loop, it is not working as expected

Question

So I am working on a JavaScript web browser game. I am trying to display images for a tutorial that draw images in different locations. What I want to do is use setTimeout inside my for loop so that it draws the image waits 5 seconds, then draws the next tutorial image. But when I run it, I just see the last image and I tried debugging using console.log which prints 12 times right away, so no delay is happening?

UI.prototype.displayTutorial = function() {
    var that = this;
    var tutorialImages = [
        ["./img/tutorial/keybinds.png", 0, 0],
        ["./img/tutorial/information.png", 400, 0],
        ["./img/tutorial/health.png", 400, 0],
        ["./img/tutorial/resources.png", 400, 0],
        ["./img/tutorial/base.png", 250, 600],
        ["./img/tutorial/lane.png", 300, 300],
        ["./img/tutorial/defenders.png", 385, 300],
        ["./img/tutorial/marine.png", 385, 300],
        ["./img/tutorial/ghost.png", 385, 300],
        ["./img/tutorial/battlecruiser.png", 385, 350],
        ["./img/tutorial/antiair.png", 385, 350],
        ["./img/tutorial/scv.png", 385, 590]
    ];

    that.gameEngine.tutorialPause(true);

    //Draw tutorial
    var canvasThree = document.getElementById("gameOverlayScreen");
    var ctxThree = canvasThree.getContext("2d");

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

        var tempSrc = tutorialImages[i][0];
        var tempX = tutorialImages[i][1];
        var tempY = tutorialImages[i][2];
        var tempImg = new Image();
        tempImg.onload = function() {
            ctxThree.drawImage(tempImg, tempX, tempY, 400, 100);
        }
        tempImg.src = tempSrc;

        setTimeout(function() {
            console.log("Delaying to display next tutorial image");
        }, 5000);

        ctxThree.clearRect(0, 0, canvasThree.width, canvasThree.height);
    }

    that.gameEngine.tutorialPause(false);
}

You need to call the draw image function in setTimeout – sinhavartika Feb 28 '18 at 07:27 — sinhavartika, Feb 28 '18 at 07:27

score 0 · Answer 1 · answered Feb 28 '18 at 07:25

The setTimeout() method calls a function or evaluates an expression after a specified number of milliseconds. Which means, it will just loop through all of your code and everything will be done in 5 seconds. setTimeout() can't be used to "pause" code execution.

There is way to "pause" code execution in this thread: How to pause javascript code execution for 2 seconds

function sleep(miliseconds) {
   var currentTime = new Date().getTime();

   while (currentTime + miliseconds >= new Date().getTime()) {
   }
}

score 0 · Answer 2 · answered Feb 28 '18 at 12:49

all the timeouts are called almost at same time, then all together activate after 5 seconds, but only the last one ends up showing.

you can do a recursive function with timeout. for example:

<script>
var numberOfImages = 5;

function showImage(index){

console.log("show image",index);
console.log("get canvas");
console.log("get context 2d");
console.log("doing stuff");

console.log("repeat in 5 seconds");
console.log("***************************");

if(index == numberOfImages) {console.log("END OF SHOW"); return;}

setTimeout(showImage,5000,++index);
}

showImage(1);
</script>

When I use setTimeout inside of a for loop, it is not working as expected

2 Answers2