setTimeOut bewirkt, dass die Funktion ausgelöst wird, bevor auf die Schaltfläche geklickt wird

Question

Ich bin gerade mitten in einem Javascriptkurs und spiele mit einem sehr einfachen Projekt herum, wobei ich zufällige Formen (nur Quadrate und Kreise) erzeugen muss, die zufällig erscheinen sollen Positionen auf der Seite. Die erste Form muss nach einer zufälligen Verzögerung angezeigt werden, sobald auf eine Start-Schaltfläche geklickt wird.

Ursprünglich zeichnete ich die Formen auf einer Leinwand, aber da die gezeichneten Formen später für das Projekt anklickbar sein müssen und ich nur Quadrate und Kreise erzeugen muss, habe ich mich darauf beschränkt, divs zu verwenden, die sich in ihrer Form unterscheiden. Größe und Position. Ich habe die Formen, die gut erscheinen, sobald der Knopf geklickt wird, aber ich kämpfe, um die Verzögerung auf der Funktion hinzuzufügen. Dies ist mein Code ohne die Verzögerung:

<button id="start">Start</button> 
    <div id="shape"></div> 

    <script type="text/javascript"> 

    function generateRandomShape() { 
     var randomColor = ["red", "green", "blue", "orange", "purple"]; 
     var radiusOptions = ["50%", ""] 
     document.getElementById("shape").style.backgroundColor = randomColor[Math.floor(Math.random() * randomColor.length)]; 
     document.getElementById("shape").style.borderRadius = radiusOptions[Math.floor(Math.random() * radiusOptions.length)]; 
     document.getElementById("shape").style.height = Math.random() * 500; 
     document.getElementById("shape").style.width = document.getElementById("shape").style.height; 
     document.getElementById("shape").style.marginLeft = Math.random() * 1000; 
     document.getElementById("shape").style.marginTop = Math.random() * 400; 
    }; 

    document.getElementById("start").onclick = generateRandomShape; 

    </script> 

Ich versuchte, das Onclick Aufruf wie folgt zu ändern:

 document.getElementById("start").onclick = setTimeOut(generateRandomShape,2000); 

Aber jetzt ist die Funktion löst nach 2 Sekunden, ohne auf die Schaltfläche geklickt wird (Ich werde das Hinzufügen werden im zufälligen Element zur Zeitverzögerung mit Math.random, sobald ich das funktioniere!). Die Logik, warum dies vor dem Event-Handler ausgelöst wird, kann nicht ermittelt werden.

Answer 1

Diese Zeile:

document.getElementById("start").onclick = setTimeOut(generateRandomShape,2000); 

Verursacht die setTimout Funktion sofort ausgeführt werden, denn sobald es gefunden wird, die Funktion ausgeführt wird und der Rückgabewert (falls vorhanden) ist, was mit der onclick Eigenschaft zugewiesen wird.

ändern Sie die Zeile auf:

document.getElementById("start").onclick = function(){setTimeout(generateRandomShape,2000)}; 

Damit die Funktion, die die setTimeout Anweisung enthält wird in der onclick Eigenschaft gespeichert und wird nicht ausgeführt, bis das click Ereignis eintritt. Außerdem haben Sie setTimeout als setTimeOut falsch geschrieben.

Auch benötigen Sie nicht type=text/javascript in Ihrem script Tags.

Darüber hinaus ist Ihre Funktion nicht geschrieben, um sehr gut zu funktionieren. Sie sollten nur für ein Element einmal scannen, anstatt auf jeder Zeile des Codes, wie folgt aus:

function generateRandomShape() { 
 

 
    var randomColor = ["red", "green", "blue", "orange", "purple"]; 
 
    var radiusOptions = ["50%", ""] 
 
    var shape = document.getElementById("shape"); // <-- Just scan for the element once 
 
    
 
    shape.style.backgroundColor = randomColor[Math.floor(Math.random() * randomColor.length)]; 
 
    shape.style.borderRadius = radiusOptions[Math.floor(Math.random() * radiusOptions.length)]; 
 
    shape.style.height = Math.random() * 500; 
 
    shape.style.width = shape.style.height; 
 
    shape.style.marginLeft = Math.random() * 1000; 
 
    shape.style.marginTop = Math.random() * 400; 
 
}; 
 

 
// It's better to use modern standards for event wiring (.addEventListener) 
 
// instead of event properties (.onclick) 
 
document.getElementById("start").addEventListener("click",function(){ 
 
    // You had mis-capitalized setTimeout as setTimeOut! 
 
    setTimeout(generateRandomShape,2000) 
 
});

<button id="start">Start</button> 
 
<div id="shape">This is the shape element.</div>