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位于shrink内的范围内，因此您无法访问update中您尝试调用它的代码。 JavaScript范围是基于功能的，因此update无法看到asplode，因为它不在shrink内。（In your console，您会看到如下错误：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语句已经发生（确切地说，它发生在大约100ms之前）。我认为这不是你想要的。相反，你应该有一个递减函数，由setInterval重复调用，最后在balls.splice(p,1)之后执行p.radius == 0。

Answer 2

setInterval(shrink(p),100);

这不符合你的想法。这会调用shrink，将其传递给p，然后将结果传递给setInterval。 shrink(p)会返回undefined，因此此行实际上并未在某个时间间隔内放置任何内容。

你可能想要：

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

为什么我的球（物体）不会缩小/消失？

2 个答案: