Medizinmann: Warum feuert setTimeout hier nicht nur einmal?

Beitrag lesen

Hallo,

in meiner [allzu oft augenscheinlich obskuren] Welt muss die setTimeout() - Methode zumindest aus zwei Parametern bestehen: der erste Parameter beschreibt, welche Funktion ausgeführt werden soll, der zweite nach welcher Zeit dies zu geschehen hat. So weit so übersichtlich.

Nun bin ich über eines von Adam Khoury's unzweifelhaft [oft] genialen Tutorials gestolpert, dessen Funktionsweise sich mir in Hinblick auf oben beschriebene Methode nicht so recht erschließen will:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
canvas{border: #999 1px solid;}
</style>
<script type="application/javascript" language="javascript">
function draw(x,y) {
		var canvas = document.getElementById('canvas');
		var ctx = canvas.getContext('2d');
		ctx.clearRect(0,0,550,400);
		ctx.fillStyle = "rgba(0,200,0,1)";
		ctx.fillRect (x, 20, 50, 50);
		x += 2;
		var loopTimer = setTimeout('draw('+x+', '+y+')', 1000);
}
</script>
</head>
<body>
<button onclick="draw(0,0)">Draw</button>
<canvas id="canvas" width="550" height="400"></canvas>
</body>
</html>

Meines Erachtens dürfte laut diesem Script die setTimeout-Methode genau ein EINZIGES Mal feuern; - tut sie aber nicht. Stattdessen wird x jede Sekunde um den Faktor 2 inkrementiert, und das ganz ohne [beispielsweise] einer for- oder einer while-Schleife...

Daher meine [Verständnis-]frage: Warum feuert die setTimeout() - Methode hier jede Sekunde, und nicht, wie zu erwarten wäre, nur EIN EINZIGES Mal nach einer Sekunde?

Vielen Dank für tatkräftige Aufklärungsversuche! Ergebenst, Euer Medizinmann.