javascript - funcion - jquery

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

Question

http://jsfiddle.net/goldrunt/jGL84/42/ esto es de la línea 84 en este violín de JS. Hay 3 efectos diferentes que pueden aplicarse a las bolas sin comentar 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);
    }
}

Answer 1

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

asplode es local al alcance dentro de shrink y, por lo tanto, no es accesible para el código en la update donde está intentando llamarlo. El alcance de JavaScript está basado en la función, por lo que la update no puede ver asplode porque no está dentro de shrink . ( En su consola , verá un error como: Uncaught ReferenceError: asplode is not defined .)

En primer lugar, puede intentar mover un asplode fuera 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:

• setInterval espera una función. setInterval(shrink(p), 100) hace que setInterval obtenga el valor de retorno de shrink(p) invocación inmediata shrink(p) . Probablemente quieras

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

• Su código for (var i = 0; i < 100; i++) { p.radius -= 1; } for (var i = 0; i < 100; i++) { p.radius -= 1; } probablemente no hace lo que crees 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 operación setInterval ).

• .splice espera 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 su intervalo se ejecuta por primera vez, la declaración de balls.splice ya sucedió (sucedió hace unos 100 ms, para ser exactos). Supongo que eso no es lo que quieres. En su lugar, deberías tener una función de disminución que sea llamada repetidamente por setInterval y finalmente realice balls.splice(p,1) después de p.radius == 0 .

Answer 2

setInterval(shrink(p),100);

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

Probablemente quieras:

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