addEventListener with requestAnimationFrame

Question

window.requestAnimationFrame을 사용하여 게임 루프를 만듭니다.

모든 것이 잘 작동하지만 이벤트 리스너를 추가하려고하면 정말 빠르게 수백 번 발생합니다.

클로저를 사용해 보았지만 작동하지 않습니다.

game.update = function(){ 
    //code that runs every frame 
    window.addEventListener('keydown', function(){ 
     console.log("message"); 
    },false); 
} 

나는 여러 번하지를 keyDown 이벤트에 ONCE 함수 를 호출합니다.

Answer 1

새 수신기 수신기가 추가 된 경우에만 이벤트 수신기가 추가됩니다. 동일한 수신기를 한 번 이상 추가하면 효과가 없습니다.by design.

당신이 addEventListener() 전화는 청취자의 새 복사본을 때마다 생성되지 않을 그래서 game.update에 할당하고있는 기능의에서 당신의 리스너 함수 이동

:

var updateListener = function() { 
    console.log('message'); 
}; 

game.update = function() { 
    //code that runs every frame 
    window.addEventListener('keydown', updateListener, false); 
}; 

Answer 2

어쩌면 조금 늦게, 하지만 이것은 나에게 이해가되지 않습니다. 청취자는 RAF 내부에 추가되어서는 안됩니다. 외부에 놓고 처리기의 결과를 변수에 할당 한 다음 RAF가 결과를 얻고 변수를 지우면 더 빠르고 안정적이며 예측 가능한 성능을 얻게됩니다. 이것은 모바일에서 컨트롤러 입력을위한 장치 방향 수신기를 사용하는 것과 같은 유사한 작업에서 매우 분명합니다. 이벤트를 반복 할 필요가 없습니다. 한 번 설정하면 키를 누를 때마다 한 번씩 실행됩니다. RAF는 그래픽을 업데이트하는 데에만 사용해야합니다. 다른 논리는 모두 외부에 있어야합니다. 예를 들어, 이동 및 게임 메 커닉은 결과를 외부 변수 및 객체로 가리키는 setInterval이어야하지만 RAF는 액세스 할 수 있어야합니다. RAF는 새 위치 값만 가져와 변형을 설정해야합니다. 그러면 더 원활하게 작동 할 것이고 '시간'은 속도를 높이거나 낮추지 않고 프레임 속도와 상관없이 여러 장치에서 일관성을 유지할 것입니다.