Mengapa bola (benda) saya tidak menyusut / menghilang?

http://jsfiddle.net/goldrunt/jGL84/42/ ini dari baris 84 di biola JS ini. Ada 3 efek berbeda yang dapat diterapkan pada bola dengan menghapus komentar baris 141-146. Efek 'bouncing' berfungsi sebagaimana mestinya, tetapi efek 'asplode' tidak menghasilkan apa-apa. Haruskah saya menyertakan fungsi 'menyusut' di dalam fungsi 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);
    }
}

Kode Anda memiliki beberapa masalah.

Pertama, dalam definisi Anda:

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

asplodebersifat lokal ke ruang lingkup di dalam shrinkdan oleh karena itu tidak dapat diakses oleh kode di updatemana Anda mencoba menyebutnya. Lingkup JavaScript berbasis fungsi, jadi updatetidak bisa melihat asplodekarena tidak ada di dalam shrink. ( Di konsol Anda, Anda akan melihat kesalahan seperti:Uncaught ReferenceError: asplode is not defined )

Anda pertama mungkin mencoba bukannya bergerak asplodedi luar 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);
}

Namun, kode Anda memiliki beberapa masalah lagi yang berada di luar cakupan pertanyaan ini:

• setIntervalmengharapkan suatu fungsi. setInterval(shrink(p), 100)menyebabkan setIntervaluntuk mendapatkan nilai kembali dari segera-dipanggil shrink(p) . Anda mungkin mau

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

• Kode Anda for (var i = 0; i < 100; i++) { p.radius -= 1; }mungkin tidak melakukan apa yang Anda pikirkan. Ini akan segera menjalankan operasi pengurangan 100 kali, dan kemudian secara visual menunjukkan hasilnya. Jika Anda ingin merender ulang bola di setiap ukuran baru, Anda harus melakukan setiap pengurangan individu di dalam callback waktu yang terpisah (seperti setIntervaloperasi).

• .splicemengharapkan indeks numerik, bukan objek. Anda bisa mendapatkan indeks numerik suatu objek dengan indexOf:

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

• Pada saat interval Anda berjalan untuk pertama kalinya, balls.splicepernyataan tersebut telah terjadi (tepatnya sekitar 100 ms yang lalu, tepatnya). Saya berasumsi bukan itu yang Anda inginkan. Sebagai gantinya, Anda harus memiliki fungsi pengurangan yang berulang kali dipanggil oleh setIntervaldan akhirnya melakukan balls.splice(p,1)setelahnya p.radius == 0.

setInterval(shrink(p),100);

Ini tidak melakukan apa yang Anda pikirkan. Ini memanggil shrink, meneruskannya p, dan kemudian meneruskan hasilnya ke setInterval. shrink(p)kembaliundefined , jadi baris ini tidak benar-benar menempatkan apa pun pada interval.

Anda mungkin ingin:

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