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

JAVASCRIPT / 글쓴이

http://jsfiddle.net/goldrunt/jGL84/42/
이것은 JS 바이올린의 84 행에 있습니다. 주석 해제 라인 141-146에 의해 볼에 적용될 수있는 3 가지 다른 효과가 있습니다. ‘바운스’효과는 정상적으로 작동하지만 ‘아스 플로이드’효과는 아무 효과가 없습니다. 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);
    }
}

답변

코드에 몇 가지 문제가 있습니다.

첫째, 당신의 정의에서 :

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볼 수 없습니다 . ( 콘솔 에서 다음과 같은 오류가 표시 됩니다.)asplodeshrinkUncaught 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

답변

setInterval(shrink(p),100);

이것은 당신이 생각하는 것을하지 않습니다. 이 함수 shrink는 호출 하고 전달한 p다음 결과를 전달합니다 setInterval. shrink(p)반환 undefined때문에이 라인은 실제로 간격에 아무것도 넣지 않습니다.

당신은 아마 원할 것입니다 :

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

답변