[解決済み】ボール（オブジェクト）が縮んだり消えたりしないのはなぜですか？

質問

http://jsfiddle.net/goldrunt/jGL84/42/ これは、このJSフィドルの84行目からです。141-146行目のコメントを解除することで、ボールに3種類の効果を適用することができます。バウンス'エフェクトはその通りに動作しますが、'asplode'エフェクトは何もしません。asplode関数の中に'shrink'関数を含めるべきでしょうか？

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

解決方法は？

あなたのコードにはいくつかの問題があります。

まず、定義にあります。

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 の中のスコープにローカルです。 shrink のコードからはアクセスできません。 update を呼び出そうとしているところです。JavaScriptのスコープは関数ベースなので update を見ることはできません。 asplode の中に入っていないため shrink . ( コンソールで のように、エラーが表示されます。 Uncaught ReferenceError: asplode is not defined .)

まず最初に asplode の外側 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);
}

しかし、あなたのコードには、この質問の範囲外ですが、さらにいくつかの問題があります。

• setInterval は関数を想定しています。 setInterval(shrink(p), 100) 原因 setInterval を取得する。 戻り値 の 即時起動型 shrink(p) . あなたはおそらく

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

• あなたのコード for (var i = 0; i < 100; i++) { p.radius -= 1; } おそらく、あなたが考えているようなことはしていないでしょう。これはすぐにデクリメント演算を100回実行し その後 を視覚的に表示します。新しいサイズになるたびにボールを再描画したい場合は、個別のタイミングでコールバック内で個々のデクリメントを実行する必要があります（たとえば setInterval の操作)。

• .splice はオブジェクトではなく、数値インデックスを期待します。オブジェクトの数値インデックスを得るには indexOf :

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

• インターバルが初めて実行されるころには balls.splice 文はすでに起こっています（正確には約100ms前に起こっています）。これは、あなたが望んでいることではないのでしょう。その代わり、デクリメント関数を用意し setInterval を実行し、最終的に balls.splice(p,1) の後に p.radius == 0 .