Pourquoi aren ' t ma boule (objets) rétrécissement/en voie de disparition ?

Question

http://jsfiddle.net/goldrunt/jGL84/42/ il s’agit de la ligne 84 de ce violon JS. Il y a 3 différents effets qui peuvent être appliqués aux balles d’uncommenting lignes 141-146. L’effet « rebond » fonctionne comme il se doit, mais l’effet « asplode » ne fait rien. Dois-je inclure la fonction de « shrink » à l’intérieur de la fonction asplode ?

Answer 1

Votre code a un peu de problèmes.

Tout d'abord, dans votre définition:

var shrink = function(p) {
    for (var i = 0; i < 100; i++) {
        p.radius -= 1;
    }

    function asplode(p) {
         setInterval(shrink(p),100);
        balls.splice(p, 1);
    }
}

asplode locale est à la portée à l'intérieur d' shrink et n'est donc pas accessible pour le code en update où vous essayez de l'appeler. JavaScript champ d'application est basée sur la fonction, de sorte update ne peut pas voir asplode car il n'est pas à l'intérieur d' shrink. (Dans votre console, vous verrez un message d'erreur tel que: Uncaught ReferenceError: asplode is not defined.)

Vous pouvez d'abord essayer au lieu de déplacer asplode à l'extérieur de l' shrink:

var shrink = function(p) {
    for (var i = 0; i < 100; i++) {
        p.radius -= 1;
    }
}

function asplode(p) {
     setInterval(shrink(p),100);
     balls.splice(p, 1);
}

Cependant, votre code a plusieurs problèmes qui sont à l'extérieur de la portée de cette question:

• setInterval s'attend à une fonction. setInterval(shrink(p), 100) provoque setInterval pour obtenir la valeur de retour de l' immédiat invoquées shrink(p). Vous voulez probablement

  setInterval(function() { shrink(p) }, 100)
  

• Votre code for (var i = 0; i < 100; i++) { p.radius -= 1; } n'est probablement pas ce que vous pensez que cela fonctionne. Cela permettra d'exécuter immédiatement la diminution de l'opération 100 fois, et puis visuellement le résultat. Si vous voulez re-rendre la balle à chaque nouvelle taille, vous devrez effectuer chaque décrémenter à l'intérieur d'une distribution distinct de rappel (comme un setInterval de l'opération).

• .splice s'attend à un index numérique, pas un objet. Vous pouvez obtenir de l'index numérique d'un objet avec indexOf:

  balls.splice(balls.indexOf(p), 1);
  

• Par le temps que votre intervalle s'exécute pour la première fois, l' balls.splice déclaration est déjà arrivé (c'est arrivé il y a environ 100ms, pour être exact). Je suppose que c'est pas ce que vous voulez. Au lieu de cela, vous devriez avoir une décrémentation de la fonction qui récupère appelé à plusieurs reprises par setInterval et enfin effectue balls.splice(p,1) après p.radius == 0.

Answer 2

 setInterval(shrink(p),100);
 

Cela ne fait pas ce que vous pensez qu'il fait. Cela appelle shrink , le passe p , puis passe le résultat à setInterval . shrink(p) renvoie undefined , donc cette ligne ne met rien sur un intervalle.

Vous voulez probablement:

 setInterval(function(){
    shrink(p)
}, 100);