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

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.(在您的控制台中,您会看到如下错误: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);