Topum (nesneler) neden küçülmüyor / kaybolmuyor?

http://jsfiddle.net/goldrunt/jGL84/42/ bu JS kemanındaki 84. satırdan. 141-146 no'lu satırları açmadan toplara uygulanabilen 3 farklı efekt vardır. 'Sıçrama' efekti olması gerektiği gibi çalışır, ancak 'asplode' efekti hiçbir şey yapmaz. Aspirasyon fonksiyonunun içine 'shrink' fonksiyonunu eklemeli miyim?

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

Kodunuzda birkaç sorun var.

İlk olarak, tanımınızda:

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

asplodeiçindeki kapsam için yereldir shrinkve bu nedenle updateonu aramaya çalıştığınız kod tarafından erişilemez . JavaScript kapsamı işlev tabanlıdır, bu nedenle içeride updateolmadığı için göremezsiniz . ( Konsolunuzda aşağıdaki gibi bir hata görürsünüz .)asplodeshrinkUncaught ReferenceError: asplode is not defined

İlk olarak aşağıdakilerin asplodedışına çıkmayı deneyebilirsiniz 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);
}

Ancak, kodunuzun bu sorunun kapsamı dışında kalan birkaç sorunu daha vardır:

• setIntervalbir işlev bekliyor. setInterval(shrink(p), 100)neden setIntervalalmak için dönüş değeri arasında -derhal çağrılan shrink(p) . Muhtemelen istiyorsun

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

• Kodunuz for (var i = 0; i < 100; i++) { p.radius -= 1; }muhtemelen düşündüğünü yapmaz. Bu işlem hemen azaltma işlemini 100 kez çalıştırır ve ardından sonucu görsel olarak gösterir. Topu her yeni boyutta yeniden işlemek istiyorsanız, her bir ayrı düşüşü ayrı bir zamanlama geri araması (bir setIntervalişlem gibi ) içinde yapmanız gerekir .

• .splicebir nesne değil, sayısal bir dizin bekliyor. Aşağıdakilerle bir nesnenin sayısal dizinini alabilirsiniz indexOf:

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

• Aralığınız ilk kez çalıştığında, balls.spliceifade zaten gerçekleşti (tam olarak 100ms önce oldu). Sanırım istediğin bu değil. Bunun yerine, sürekli tarafından çağrılır bir eksiltim fonksiyonu olmalıdır setIntervalve son olarak gerçekleştirir balls.splice(p,1)sonra p.radius == 0.

setInterval(shrink(p),100);

Bu düşündüğünü yapmaz. Bu çağırır shrink, geçirir pve sonra sonucu iletir setInterval. shrink(p)döner undefined, bu nedenle bu çizgi aslında bir aralığa hiçbir şey koymaz.

Muhtemelen siz istersiniz:

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