Por que minha bola (objetos) não está encolhendo / desaparecendo?

http://jsfiddle.net/goldrunt/jGL84/42/ isto é da linha 84 neste violino de JS. Existem três efeitos diferentes que podem ser aplicados às bolas, removendo as linhas 141-146. O efeito 'devolver' funciona como deveria, mas o efeito 'devolver' não faz nada. Devo incluir a função 'encolher' dentro da função 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);
    }
}

Seu código tem alguns problemas.

Primeiro, na sua definição:

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é local para o escopo interno shrinke, portanto, não é acessível para o código em updateque você está tentando chamá-lo. O escopo do JavaScript é baseado em funções, portanto, updatenão pode ser visto asplodeporque não está dentro shrink. ( No seu console , você verá um erro como:. Uncaught ReferenceError: asplode is not defined)

Você pode primeiro tentar asplodesair 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);
}

No entanto, seu código tem vários outros problemas que estão fora do escopo desta pergunta:

• setIntervalespera uma função. setInterval(shrink(p), 100)causas setIntervalpara obter o valor de retorno de invocação imediata shrink(p) . Você provavelmente quer

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

• Seu código for (var i = 0; i < 100; i++) { p.radius -= 1; }provavelmente não faz o que você pensa que faz. Isso executará imediatamente a operação de decremento 100 vezes e, em seguida, mostrará visualmente o resultado. Se você deseja renderizar novamente a bola a cada novo tamanho, será necessário executar cada decremento individual dentro de um retorno de chamada de tempo separado (como uma setIntervaloperação).

• .spliceespera um índice numérico, não um objeto. Você pode obter o índice numérico de um objeto com indexOf:

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

• Quando seu intervalo é executado pela primeira vez, a balls.splicedeclaração já aconteceu (aconteceu há cerca de 100 ms, para ser exato). Presumo que não é isso que você quer. Em vez disso, você deve ter uma função decrescente que é repetidamente chamada setIntervale finalmente executa balls.splice(p,1)depois p.radius == 0.

setInterval(shrink(p),100);

Isso não faz o que você pensa que faz. Isso chama shrink, passa pe depois passa o resultado para setInterval. shrink(p)retorna undefined, então essa linha não coloca nada em um intervalo.

Você provavelmente quer:

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