Countdown nach Buttondruck

Question

Hallo,

ich habe den folgenden Code geschrieben, um nach dem Klick auf einen Button eine visuelle Zählaufgabe (pulsierendes Bild) zu starten:

<div style="text-align: center; margin: 40px 0"> <img name="blinker1" src="Circle.png"></div>

Bitte klicke hier, wenn du loslegen möchtest: <input id="clickMe" type="button" value="Start" onclick="startBlink()" /> 

<script type="text/javascript">
        document.images["blinker1"].style.visibility = "hidden"; //hide image on load
        numberOfBlinks=15; //image blinks for n-times
        timeIntervall=349 // time in ms, divide by 1000 for seconds
            
function startBlink() {
	    i=0
        imgLoop = window.setInterval("blinkImg()", timeIntervall) 
        }

function blinkImg() {       
        var obj = document.images["blinker1"];
        if (obj.style.visibility == 'hidden') {
	obj.style.visibility = '';
	i = i + 1; }
else {
	obj.style.visibility = 'hidden'
        console.log(i) }
        if (i>numberOfBlinks) {
	window.clearInterval(imgLoop);
	obj.style.visibility = 'hidden' }
};
</script>

Mein Problem ist, dass das Blinken des Bildes unmittelbar nach dem drücken des Buttons beginnt. Leider sind meine Java-Script Kentnisse zu schlecht um zu beurteilen mit wie viel Aufwand man eine Verzögerung in diesen Code hineinschreiben könnte. Auch ein visueller Countdown (3,2,1, GO) innerhalb des Buttons wäre denkbar.

Vielleicht kann mir jemand helfen?

Vielen Dank im Voraus

Answer 1

Vorab: Der Code ist nicht ganz sauber. Zum Beispiel werden da mehrere globale Variablen (numberOfBlinks, imgLoop, i, ...) verwendet, aber nicht mit var deklariert. Auch document.images["blinker1"] sieht nach altem Internet Explorer Code aus - vermutlich würde man heute eher document.getElementById("blinker1") schreiben.

Abgesehen davon ist das mit der Verzögerung relativ einfach. Sie machen aus...

function startBlink() {
	i=0
	imgLoop = window.setInterval("blinkImg()", timeIntervall) 
}

Einen verschachtelten Aufruf mit window.setTimeout()

function startBlink() {
	window.setTimeout(function() {
		i=0
		imgLoop = window.setInterval("blinkImg()", timeIntervall) 
	}, 1000);
}

Die 1000 in der vorletzten Zeile sind 1000 ms Verzögerung, also 1 Sekunde.