Perché la mia palla (oggetti) non si restringe/scompare?

Question

http://jsfiddle.net/goldrunt/jGL84/42/ questo è dalla linea 84 in questo violino JS. Ci sono 3 effetti diversi che possono essere applicati alle palle con le linee di commento 141-146. L'effetto "rimbalzo" funziona come dovrebbe, ma l'effetto "asplode" non fa nulla. Dovrei includere la funzione 'shrink' all'interno della funzione asplode?

// balls shrink and disappear if they touch 
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); 
    } 
} 

Answer 1

Il codice ha alcuni problemi.

In primo luogo, nella definizione:

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 al campo di applicazione all'interno shrink e quindi non accessibili al codice nella update in cui si sta tentando di chiamarlo. Lo scope JavaScript è basato sulle funzioni, quindi update non può vedere asplode perché non è all'interno di shrink. (In your console, vedrete un errore simile:. Uncaught ReferenceError: asplode is not defined)

Si potrebbe provare prima invece lo spostamento al di fuori della asplodeshrink:

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); 
} 

Tuttavia, il codice ha molti più problemi che sono al di fuori del campo di applicazione questa domanda:

• setInterval si aspetta una funzione. setInterval(shrink(p), 100) causa setInterval per ottenere il valore di ritorno di invocato immediatamenteshrink(p). Probabilmente si desidera

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

• Il codice for (var i = 0; i < 100; i++) { p.radius -= 1; } probabilmente non fai quello che pensi lo fa. Ciò eseguirà immediatamente l'operazione di decremento 100 volte e quindi visualizzerà visivamente il risultato. Se si desidera eseguire nuovamente il rendering della palla a ogni nuova dimensione, sarà necessario eseguire ogni singolo decremento all'interno di una richiamata temporizzazione separata (come un'operazione setInterval).

• .splice si aspetta un indice numerico, non un oggetto. È possibile ottenere l'indice numerico di un oggetto con indexOf:

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

• Con il tempo l'intervallo viene eseguito per la prima volta, la dichiarazione balls.splice è già successo (è successo circa 100ms fa, per l'esattezza). Presumo che non è quello che vuoi. Invece, si dovrebbe avere una funzione di decremento che viene ripetutamente chiamata da setInterval e, infine, esegue balls.splice(p,1) dopo p.radius == 0.

Answer 2

setInterval(shrink(p),100); 

Questo non fa quello che pensi lo fa. Ciò chiama shrink, lo passa p e quindi passa il risultato a setInterval. shrink(p) restituisce undefined, quindi questa riga in realtà non inserisce nulla in un intervallo.

probabilmente si vuole:

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