ボール（オブジェクト）が縮小/消滅しないのはなぜですか？

Question

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

Answer 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はあなたがそれを呼び出すようにしようとしているupdate内のコードにアクセスしない範囲shrink内側したがってに対してローカルです。 JavaScriptスコープは関数ベースなので、はshrinkの中にないため、asplodeを見ることができません。 （In your console、あなたのようなエラーが表示されます：。Uncaught ReferenceError: asplode is not defined）

最初shrinkのasplode外を移動する代わりに、試してみてください：

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文がすでに起こっている（正確には、およそ100ミリ秒前に起こりました）。私はあなたが望むものではないと思います。代わりに、setIntervalで繰り返し呼び出され、最後にp.radius == 0の後にballs.splice(p,1)を実行するデクリメント関数が必要です。

Answer 2

setInterval(shrink(p),100); 

これは、あなたがそれがないと思う何をしません。これによりshrinkが呼び出され、pが渡され、結果がsetIntervalに渡されます。 shrink(p)はundefinedを返すので、この行は実際には何も間隔を置かない。

あなたはおそらくしたい：

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