为什么我的球(物体)没有缩小/消失?

< a href = " http://jsfiddle.net/goldrunt/jGL84/42/ " > http://jsfiddle.net/goldrunt/jGL84/42/ 这是这个JS小提琴的第84行。有3种不同的效果，可以应用到球取消注释行141-146。“反弹”效果发挥了应有的作用，但“爆炸”效果没有任何作用。我是否应该在asplode函数中包含“收缩”函数?< / p > 

// 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);
}
}
9121 次浏览
小开 
setInterval(shrink(p),100);

这不是你想的那样。这个函数调用shrink，将其传递给p，然后将结果传递给setInterval。shrink(p)返回undefined，所以这一行实际上没有在interval上放任何东西。

你可能想:

setInterval(function(){
shrink(p)
}, 100);
小开
最佳答案

您的代码有一些问题。

首先，在你的定义中:

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得到immediate-invoked shrink(p)的返回值。你可能想要

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

  • Your code for (var i = 0; i < 100; i++) { p.radius -= 1; } probably does not do what you think it does. This will immediately run the decrement operation 100 times, and then visually show the result. If you want to re-render the ball at each new size, you will need to perform each individual decrement inside a separate timing callback (like a setInterval operation).

  • .splice expects a numeric index, not an object. You can get the numeric index of an object with indexOf:

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

  • By the time your interval runs for the first time, the balls.splice statement has already happened (it happened about 100ms ago, to be exact). I assume that's not what you want. Instead, you should have a decrementing function that gets repeatedly called by setInterval and finally performs balls.splice(p,1) after p.radius == 0.


提交答案