Appel d'une méthode de fonction anonyme Javascript sur un timer

Question

Je travaille sur la création d'un feu d'artifice en javascript pour mon dernier jour de travail demain et j'ai quelques difficultés à l'automatiser. J'utilise le feu d'artifice trouvé aquí et cela fonctionne très bien, mais cela va être sur une page web d'état que j'ai développée il y a un certain temps, donc je veux que les feux d'artifice soient automatiques plutôt que sur un clic.

J'ai créé une fonction sur la page fireworks.js qui ressemble à ceci...

function fireFireworks(){
    var num = Math.floor(Math.random()*3) + 1;
    for(i=0;i<num;i++){
        createFirework();
    }
}

Il sera utilisé pour tirer entre 1 et 3 feux d'artifice lorsqu'il sera appelé. Ensuite, je configure

setInterval('fireFireworks()', 5000);

Lorsque ces deux éléments sont définis dans mon fichier local et non dans le fichier fireworks.js, j'obtiens une mauvaise référence à createFirework() .

Donc j'ai déplacé le fireFireworks() juste en dessous de la fonction initialize dans fireworks.js et ensuite j'obtiendrais une mauvaise référence à fireFireworks() alors j'ai déplacé mon setInterval dans le intialize mais j'obtiens toujours une mauvaise référence à la fonction fireFireworks() .

Cependant, si je change le liant pour onmouseup de document.addEventListener('mouseup', createFireworks, true) ; à document.addEventListener('mouseup', fireFireworks, true) ;

Il crée avec succès mes multiples feux d'artifice.

Je suppose que la portée de setInterval joue un rôle ici. Si quelqu'un peut me donner une idée de la façon dont je pourrais automatiser cela, ainsi que des informations sur la raison pour laquelle ma configuration ne fonctionne pas, je l'apprécierais vraiment !

Answer 1

Il est plus agréable de passer la fonction elle-même à setInterval c'est-à-dire

setInterval (fireFireworks, 5000)

En ce qui concerne le cadrage, si votre createFireworks n'est pas utilisée ailleurs, il suffit de la mettre en place à l'intérieur de fireFireworks et vous n'avez plus à vous en soucier (il est généralement considéré comme plus agréable de le faire de toute façon, car cela évite de polluer la portée globale).

Sinon, il faut envelopper les deux fonctions dans une fermeture :

(function ()
{
    function fireFireworks ()
    {
        /* ... */
    }

    function createFirework ()
    {
        /* ... */
    }

    setInterval (fireFireworks, 5000)

}) ();

Answer 2

Essayez ça :

(function(global){
    var theShow = {},
        createFirework;

    createFirework = function() {
    };    

    theShow.fireFireworks = function() {
        var num = Math.floor(Math.random()*3) + 1,
            i = 0;
        for(i;i<num;i++){
            createFirework();
        }
    };
   global.setInterval(theShow.fireFireworks , 5000);
   global.theShow = theShow;
}(window));

Vous pourrez désormais appeler theShow.firFireworks() à partir de n'importe quel code JavaScript de votre application, à condition que ce soit après l'appel de ce code. J'espère que cela vous aidera.

Answer 3

Vous utilisez la fonction setInterval() d'une manière qui perturbe votre portée (en utilisant une chaîne). Essayez d'ajouter à votre fonction initialize :

 var fireworksTimer = setInterval(fireFireworks, 5000); 

alors si vous faites de fireFireworks une fonction "publique",

 fireFireworks = function(){
      ....
 }

dans le fichier js séparé, il devrait maintenant être appelable.

Answer 4

SetInterval('fireFireworks', 20) ne fonctionnera pas car il s'agit d'une chaîne de caractères ; vous devez taper setInterval(fireFireworks,20) ; cela fonctionnera maintenant.