setTimeOut provoquant le déclenchement de la fonction avant que le bouton soit cliqué

Question

Je suis juste au milieu d'un cours javascript et je joue avec un projet très basique dans lequel je dois générer des formes aléatoires (juste des carrés et des cercles) qui devraient apparaître au hasard positions sur la page. La première forme doit apparaître après un délai aléatoire une fois qu'un bouton de démarrage est cliqué. A l'origine, je dessine les formes sur une toile mais comme les formes dessinées doivent être cliquables plus tard pour le projet et comme je n'ai besoin que de générer des carrés et des cercles, je me suis contenté d'utiliser des divs de forme variable, taille et position. J'ai les formes apparaissant juste une fois le bouton est cliqué, mais j'ai du mal à ajouter dans le retard sur la fonction. Ceci est mon code sans délai:

<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> 

J'ai essayé de modifier l'appel onclick comme suit:

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

Mais maintenant, la fonction déclenche au bout de 2 secondes sans le bouton étant cliqué (j'ajouterons dans l'élément aléatoire à la temporisation en utilisant Math.random une fois que je reçois ce travail!). Impossible de déterminer la logique expliquant pourquoi cela se déclenche avant le gestionnaire d'événements.

Answer 1

Cette ligne:

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

Causes de la fonction setTimout pour exécuter immédiatement, car dès qu'il est rencontrée, la fonction est exécutée et la valeur de retour (le cas échéant) est ce qui est affecté à la propriété onclick.

Modifiez la ligne:

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

Pour que la fonction qui contient l'instruction setTimeout est stockée dans la propriété onclick et ne fonctionnera pas jusqu'à ce que l'événement se produit click. En outre, vous avez mis-capitalisé setTimeout comme setTimeOut. En outre, vous n'avez pas besoin de type=text/javascript dans vos tags script. En outre, votre fonction n'est pas écrite pour fonctionner très bien. Vous ne devez analyser pour un élément une fois au lieu de chaque ligne de votre code, comme ceci:

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>