setTimeout wont work in Jquery

Question

So im going to do a loop (gif'ish) with canvas, that changes image in canvas every 70ms ive tried plank javascript, but i gave up after 2 days and 5 coders had their finger in their mouth. I have 10 images all named "ratasX" and id'd with number 1-10

Heres my script

$(document).ready (function () {
$("canvas").drawImage({
    source: "ratas1.jpg",
    x: 60, y: 60
});
$("canvas").clearCanvas();
setTimeout(function(){
    $("canvas").drawImage({
        source: "ratas2.jpg",
        x: 60, y: 60
    });
}, 1000);
$("canvas").clearCanvas();
setTimeout(function(){
    $("canvas").drawImage({
        source: "ratas3.jpg",
        x: 60, y: 60
    });
}, 1000);
$("canvas").clearCanvas();
setTimeout(function(){
    $("canvas").drawImage({
        source: "ratas4.jpg",
        x: 60, y: 60
    });
}, 1000);
$("canvas").clearCanvas();
setTimeout(function(){
    $("canvas").drawImage({
        source: "ratas5.jpg",
        x: 60, y: 60
    });
}, 1000)
$("canvas").clearCanvas();
    setTimeout(function(){
    $("canvas").drawImage({
        source: "ratas6.jpg",
        x: 60, y: 60
    });
}, 1000);
$("canvas").clearCanvas();
setTimeout(function(){
    $("canvas").drawImage({
        source: "ratas7.jpg",
        x: 60, y: 60
    });
}, 1000);
$("canvas").clearCanvas();
setTimeout(function(){
    $("canvas").drawImage({
        source: "ratas8.jpg",
        x: 60, y: 60
    });
}, 1000);
$("canvas").clearCanvas();
setTimeout(function(){
    $("canvas").drawImage({
        source: "ratas9.jpg",
        x: 60, y: 60
    });
}, 1000);
$("canvas").clearCanvas();
setTimeout(function(){
    $("canvas").drawImage({
        source: "ratas10.jpg",
        x: 60, y: 60
    });
}, 1000)
}); 

is missing cause this site ducks it up.... wait time is set to 1000ms in this example. Im also using jcanavas

It hops straight to last picture

Answer 1

The problem in your code is that you run 10 commands that will all run after a 1000ms

---

You could simplify/correct this to

$(document).ready (function () {
    var images = ['ratas1.jpg','ratas2.jpg','ratas3.jpg',
                  'ratas4.jpg','ratas5.jpg','ratas6.jpg',
                  'ratas7.jpg','ratas8.jpg','ratas9.jpg',
                  'ratas10.jpg'],
        length = images.length,
        current = 0;

     function draw(){
        $("canvas").clearCanvas();
        $("canvas").drawImage({
            source: images[current],
            x: 60, y: 60
        });
        current = (current+1) % length;
        setTimeout( draw, 1000);
     }
     draw();
});

This way your images can be any number and have any name..

Answer 2

Maybe you could do something like the below. I haven't tested this but its pretty straight forward.

Every 1 second the code will execute, clear the canvas and draw a new image starting with rasta1.jpg to rasta10.jpg. with a random number between 1-10. e.g rasta2.jpg.

JQuery

var count = 1;

setInterval(function(){
    $("canvas").clearCanvas();
    $("canvas").drawImage({
       source: "ratas"+ count +".jpg",
       x: 150, y: 150,
       scale: 0.5
    });

    if(count != 10){
        count++;
    }
    else {
        count = 1;
    }  
}, 1000);

Answer 3

I would read up on the setTimeout() function, it seems like you don't really understand what it's supposed to do. It sets functions to run asynchronously, so after setTimeout() is called, execution will proceed to the next step

For example:

console.log('1');
setTimeout(function(){
    console.log('2');
}, 1000);
console.log('3');

will print:

1
3
2

That's because when you call setTimeout(function(){}, 1000); you're really saying, "In 1 second, run this method"

but the way you think it's working is: "Wait 1 second, then run this method." There's a subtle difference.

What you probably want is something like:

setTimeout(function(){
    console.log('1');
}, 1000);
setTimeout(function(){
    console.log('2');
}, 2000);
setTimeout(function(){
    console.log('3');
}, 3000);

which will print:

1
2
3