为什么我的球（物体）没有缩小/消失？答案

【问题标题】：Why aren't my ball (objects) shrinking/disappearing?为什么我的球（物体）没有缩小/消失？
【发布时间】：2013-12-31 07:15:51
【问题描述】：

http://jsfiddle.net/goldrunt/jGL84/42/ 这是来自这个 JS fiddle 的第 84 行。通过取消注释第 141-146 行，可以对球应用 3 种不同的效果。 'bounce' 效果可以正常工作，但 'asplode' 效果什么也不做。我应该在 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);
    }
}

【问题讨论】：

asplode 未在全局范围内声明（或者特别是，未在update 可访问的范围内定义）；检查我们的控制台。
幸运的是，那是 balls.splice() 和 p。
你有错误Uncaught ReferenceError: asplode is not defined。函数asplode() 不可见。
asplode 不在正确的范围内，setInterval 应该收到一个函数引用，splice 需要一个索引 - 或者世界只是随着你而缩小 jsfiddle.net/5f85b
这是一个完全不同的问题。他们唯一的共同点就是球。和 JavaScript。和注意。哦，拜托，如果你想开玩笑，至少要有品位。（但无论如何它们都会被删除。）

标签： javascript html

【解决方案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 次，then 直观地显示结果。如果您想以每个新尺寸重新渲染球，您需要在单独的计时回调中执行每个单独的递减（如setInterval 操作）。
.splice 需要一个数字索引，而不是一个对象。您可以使用indexOf 获取对象的数字索引：
```
balls.splice(balls.indexOf(p), 1);
```
当您的时间间隔第一次运行时，balls.splice 语句已经发生（确切地说，它发生在大约 100 毫秒前）。我认为这不是你想要的。相反，您应该有一个由setInterval 反复调用并最终在p.radius == 0 之后执行balls.splice(p,1) 的递减函数。

【讨论】：

【解决方案2】：

setInterval(shrink(p),100);

这并不像你认为的那样。这会调用shrink，将其传递给p，然后将结果传递给setInterval。 shrink(p) 返回 undefined，所以这一行实际上并没有在区间上放置任何东西。

你可能想要：

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

【讨论】：

@tereško：我可以忍受 :)