¿Por qué mi bola (objetos) no se encoge / desaparece?

http://jsfiddle.net/goldrunt/jGL84/42/ esto es de la línea 84 en este violín JS. Hay 3 efectos diferentes que se pueden aplicar a las bolas descomentando las líneas 141-146. El efecto 'rebote' funciona como debería, pero el efecto 'asplode' no hace nada. ¿Debo incluir la función 'reducir' dentro de la función 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);
    }
}

Tu código tiene algunos problemas.

Primero, en tu definición:

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

asplodees local en el ámbito interno shrinky, por lo tanto, no es accesible para el código en el updateque está intentando llamarlo. El alcance de JavaScript está basado en funciones, por updatelo que no se puede ver asplodeporque no está dentro shrink. ( En su consola , verá un error como:. Uncaught ReferenceError: asplode is not defined)

En primer lugar, puede intentar moverse asplodefuera de 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);
}

Sin embargo, su código tiene varios problemas más que están fuera del alcance de esta pregunta:

• setIntervalespera una función setInterval(shrink(p), 100)hace setIntervalque se obtenga el valor de retorno de invocado de inmediatoshrink(p) . Probablemente quieras

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

• Su código for (var i = 0; i < 100; i++) { p.radius -= 1; }probablemente no hace lo que cree que hace. Esto ejecutará inmediatamente la operación de disminución 100 veces y luego mostrará visualmente el resultado. Si desea volver a renderizar la bola en cada nuevo tamaño, deberá realizar cada disminución individual dentro de una devolución de llamada de tiempo separada (como una setIntervaloperación).

• .spliceespera un índice numérico, no un objeto. Puede obtener el índice numérico de un objeto con indexOf:

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

• Cuando se ejecuta el intervalo por primera vez, la balls.splicedeclaración ya ha sucedido (sucedió hace unos 100 ms, para ser exactos). Supongo que eso no es lo que quieres. En su lugar, debe tener una función de disminución que se llama repetidamente setIntervaly finalmente se realiza balls.splice(p,1)después p.radius == 0.

setInterval(shrink(p),100);

Esto no hace lo que crees que hace. Esto llama shrink, lo pasa py luego pasa el resultado a setInterval. shrink(p)regresa undefined, por lo que esta línea en realidad no pone nada en un intervalo.

Probablemente quieras:

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