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

Question

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

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 次，then 直观地显示结果。如果您想以每个新尺寸重新渲染球，您需要在单独的计时回调中执行每个单独的递减(如 setInterval 操作)。

• .splice需要一个数字索引，而不是一个对象。您可以使用 indexOf 获取对象的数字索引:

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

• 当您的区间第一次运行时，balls.splice声明已经发生(确切地说，它发生在大约 100 毫秒前)。我认为这不是你想要的。相反，您应该有一个由 setInterval 重复调用的递减函数。最后执行balls.splice(p,1)在 p.radius == 0 之后.