Najprostszy pokaz slajdów na płótnie HTML5, canvas.context.clearRect nie działa z setTimeout
Oto kod bardzo prostego pokazu slajdów, który powinien pokazywać 4 obrazy w 4 sekundy, jeden obraz na sekundę. Zamiast tego otrzymuję 4-sekundowe opóźnienie, a następnie wszystkie obrazy zostają narysowane jedna na drugiej. Co ja robię źle?
<html>
<head>
<script langugage="javascript">
// 4 images
var image0 = new Image();
image0.src = "img/image0.png";
var image1 = new Image();
image1.src = "img/image1.png";
var image0 = new Image();
image2.src = "img/image2.png";
var image3 = new Image();
image3.src = "img/image3.png";
// array of 4 images
images = new Array(image0, image1, image2, image3);
// this is the main function
function draw(){
myCanvas = document.getElementById('myCanvas');
ctx = myCanvas.getContext('2d');
counter=0; // this is the index of the next image to be shown
for (var i=0;i<images.length;i++){
setTimeout(draw_next_image, 1000);
ctx.clearRect(0, 0, myCanvas.width, myCanvas.height)
}
}
// this is the function called after each timeout to draw next image
function draw_next_image(){
ctx.drawImage(images[counter], 0, 0);
counter++;
if (counter>images.length) {counter=0;}
}
window.onload = draw;
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
AKTUALIZACJA: ODPOWIEDŹ JEST:
W powyższym kodzie błędnie założyłem togetTimeout funkcja jest synchroniczna, tj. spodziewałem się, że po jej wywołaniu wykonanie programu zatrzyma się, zaczeka 1000 milisekund, a następnie wywołujedraw_next_image i dopiero wtedy wykonajctx.clearRect.
W rzeczywistości Javascript nie działa w ten sposób. w rzeczywistościgetTimeout jest asynchroniczny, tj.getTimeout ustawia limit czasu i powraca prawie natychmiast, a wykonanie kodu jest kontynuowanectx.clearRect zostaje natychmiast wywołanywcześniejszy dodraw_next_image. Tak więc przed upływem limitu czasu i połączeńdraw_next_image, wykonanie kodu może dotrzeć do dowolnej linii kodu. W moim przypadku wszystkie 4clearRect będą wywoływane prawie w tym samym czasie, na długo przed upływem limitów czasu. Następnie 1000 milisekund później wszystkie 4 limity czasu wygasają niemal natychmiast po kolei, a wszystkie 4 obrazy będą narysowane prawie w tym samym czasie, bezclearRects, który został wykonany wcześniej.