왜 내 공 (물체)이 줄어들거나 사라지지 않습니까?

Question

http://jsfiddle.net/goldrunt/jGL84/42/ 이것은이 JS 피들의 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의 코드에 따라서 액세스 할 수 없습니다. 자바 스크립트 범위는 함수 기반이므로 update은 shrink 안에 있지 않으므로 asplode을 볼 수 없습니다. (In your console, 당신과 같은 오류가 나타납니다 :. Uncaught ReferenceError: asplode is not defined를)

을 먼저 대신 shrink의 asplode 외부 이동하려고 할 수 있습니다

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에 의해 반복적으로 호출되고, p.radius == 0 이후에 마지막으로 balls.splice(p,1)을 수행하는 감소 함수를 가져야합니다.

Answer 2

setInterval(shrink(p),100); 

이것은 당신이하지 생각하지 않습니다. 이 경우 shrink이 호출되고 p이 전달 된 후 결과가 setInterval으로 전달됩니다. shrink(p)은 undefined을 반환하므로이 줄은 실제로 간격에 아무 것도 넣지 않습니다.

당신은 아마 원하는 :

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