Чому мій кулька (предмети) не стискається / зникає?

http://jsfiddle.net/goldrunt/jGL84/42/ це з рядка 84 у цій скрипті JS. Є три різні ефекти, які можна нанести на кулі, коментуючи лінії 141-146. Ефект "відскоку" працює як слід, але ефект "асплоде" нічого не робить. Чи варто включати функцію 'скорочення' всередині функції 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);
    }
}

У вашого коду є кілька проблем.

По-перше, у вашому визначенні:

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твердження вже сталося (це було близько 100 мс тому, якщо бути точним). Я припускаю, що це не те, чого ти хочеш. Натомість у вас повинна бути функція декрементування, яка неодноразово викликається setIntervalі, нарешті, виконується balls.splice(p,1)після p.radius == 0.

setInterval(shrink(p),100);

Це не робить те, що ви думаєте, що це робить. Це викликає shrink, передає його p, а потім передає результат setInterval. shrink(p)повертається undefined, тому цей рядок насправді нічого не ставить на інтервал.

Ви, мабуть, хочете:

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