자바 스크립트에서 밀리 초 단위의 시간을 얻는 더 좋은 방법은 무엇입니까?


141

이 값을 얻을 때마다 새 객체를 인스턴스화하지 않고 날짜 객체를 사용하여 밀리 초 단위로 시간을 얻는 방법 또는 적어도 해당 객체를 재사용하는 방법이 JavaScript에 대안이 있습니까? JavaScript로 간단한 게임 엔진을 만들려고하기 때문에 이것을 묻고 있습니다. "델타 프레임 시간"을 계산할 때 매 프레임마다 새로운 Date 객체를 만들어야합니다. 성능의 영향에 대해 너무 걱정하지는 않지만이 객체가 반환 한 정확한 시간의 신뢰성에 문제가 있습니다.

나는 매초마다 애니메이션에서 이상한 "점프"를 얻었으며 이것이 너무 빨리 업데이트 할 때 JavaScript의 가비지 콜렉션 또는 Date 객체의 제한과 관련이 있는지 확실하지 않습니다. 델타 값을 일정한 값으로 설정하면 애니메이션이 완벽하게 매끄러 워 지므로이 "점프"가 시간을 얻는 방식과 관련이 있다고 확신합니다.

내가 줄 수있는 유일한 관련 코드는 델타 시간을 계산하는 방법입니다.

prevTime = curTime;
curTime = (new Date()).getTime();
deltaTime = curTime - prevTime;

움직임 / 애니메이션을 계산할 때 상수 값에 델타 시간을 곱합니다.

Date 객체를 사용하여 밀리 초 단위로 시간을 얻는 것을 피할 방법이 없으면 변수를 증가시키는 함수 (게임이 시작된 후 경과 된 시간 (밀리 초))와 SetTimer 함수를 사용하여 호출하는 함수 밀리 초마다 한 번 효율적이고 안정적인 대안이 되겠습니까?

편집 : 이제 다른 브라우저에서 내 코드를 테스트 했으며이 "점프"는 Firefox가 아닌 Chrome에서만 나타납니다. 그러나 두 브라우저에서 모두 작동하는 방법이 있다면 여전히 좋을 것입니다.


5
프레임 당 하나의 개체가 없습니다 아무것도
CodesInChaos

2
매초마다 점프하는 애니메이션에 관하여, 이것은 Date.getMilliseconds현재 초 (밀리 초) 즉 0에서 999까지만 반환 한다는 사실과 관련이있을 수 있습니까? 귀하의 예제 에서이 기능을 사용하지 않지만 다른 곳이나 다른 지점에서 사용되고 있습니까?
Dan Ross

2
점프가 이상한 밀리 초 해상도 문제와 관련이 있습니까? 로부터 모질라 문서 : "() 타임 스탬프 또는 고유 ID를 작성 지금 사용하는 경우, 해상도가 Windows에서 15 밀리 초 수 있다는 것을 명심하십시오." 딸꾹질과 관련이있을 수 있습니까?
zashu

1
@zashu 이것은 오래 전 일 이므로이 예제에 대한 구체적인 내용은 기억 나지 않습니다. 그러나 최신 응용 프로그램의 경우 Date.now ()를 사용할 때 더 이상 점프하지 않습니다.
Colin Dumitru

답변:


173

Date.now () 시도하십시오 .

건너 뛰기는 가비지 수집으로 인한 것 같습니다. 일반적으로 변수를 최대한 재사용하면 가비지 수집을 피할 수 있지만 가비지 수집 일시 중지를 줄이기 위해 사용할 수있는 방법을 구체적으로 말할 수는 없습니다.


1
Date.now ()를 사용해 보았지만 여전히 같은 점프가 있습니다. 이제 가비지 수집에 문제가 아니라 Date 객체로 정확한 값을 얻을 때의 제한 사항이라고 확신합니다. 내가 말했듯이 델타 시간을 상수 값으로 바꾸면 부드러운 애니메이션 / 전환이 발생하므로 가비지 수집은 "new Date"또는 "Date.now ()"뿐입니다 (이 함수가 자체 객체를 인스턴스화하는 경우 잘 모르겠습니다).
Colin Dumitru

22
그냥 머리 위로 : IE8 이하에서는 작동하지 않습니다
Nick

1
나는 : / 내가 원하는 것은 ms의 날짜입니다. 필요한 것이 너무 복잡해 보입니다.
Damien Golding

5
@ Prozi +1 .. IE는 정말 짜증나, 메신저 웹 프로그래밍 정말 IE, 크롬과 파이어 폭스에 대해 신경 쓰지
않아

3
@TechLife 당신은 안드로이드, 사파리, 오페라 브라우저에 한 줄의 생각을 주어야하지만, IE는 쓰레기라는 데 동의합니다. MS가 포기하고 W10에 새 브라우저를 구현하는 것은 너무 나쁘다는 것을 의미합니다
Dendromaniac

49

나는 이것이 꽤 오래된 스레드라는 것을 알고 있지만 최신 정보를 유지하고 관련성을 높이기 위해보다 정확한 performance.now()기능을 사용하여 자바 스크립트에서 미세한 입자 타이밍을 얻을 수 있습니다.

window.performance = window.performance || {};
performance.now = (function() {
    return performance.now       ||
        performance.mozNow    ||
        performance.msNow     ||
        performance.oNow      ||
        performance.webkitNow ||            
        Date.now  /*none found - fallback to browser default */
})();

2
마지막 대안은 Date.now익명 함수 표현 대신에 해야합니다
Bergi

1
불행히도 바보 같은 오래된 브라우저에서는 작동하지 않습니다. 운 좋게도 IE7 및 IE8 지원을 낭비하는 시간 동안 고객이 비용을 지불하도록 설득했습니다.
Michael Scheper 2016 년

2
|| function () {return new Date (). getTime ()}
mmm

2
performance.now()시간과 달리 단조로운 시간 을 제공 한다는 점 은 주목할 가치가 있습니다 Date. 이는 이후의 모든 호출이 이전 값보다 작지 않은 값을 반환하도록 보장합니다.
사용자

48

내가 아는 한 Date 로만 시간을 얻을 수 있습니다 .

Date.now 는 솔루션이지만 https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date/now 어디에서나 사용할 수는 없습니다 .

var currentTime = +new Date();

현재 시간 (밀리 초)을 제공합니다.

당신의 점프 를 위해 . 델타 프레임 시간 에 따라 보간을 올바르게 계산 하고 반올림 오류 가없는 경우 가비지 수집기 (GC)에 베팅합니다.

루프에 작성된 임시 오브젝트가 많이있는 경우 가비지 콜렉션은 스레드를 잠 가서 정리 및 메모리 재구성을 수행해야합니다.

Chrome을 사용하면 타임 라인 패널 에서 GC가 소비하는 시간을 확인할 수 있습니다 .

편집 : 내 대답 이후 Date.now()모든 곳에서 IE> = 9에서 지원되므로 최상의 옵션으로 간주해야합니다.


4
는 어떤 기능 않는 +봉사 +new?
Andrew Scagnelli

33
+단순히 캐스트 DateNumber밀리 세컨드의 표준 유닉스 타임 스탬프를 제공합니다. (new Date()).getTime()
ngryman

9
@mikenelson : 나에게 끔찍하지는 않지만, 강압이 어떻게 작동하는지 알면 분명합니다 Date.now().
ngryman

1
난 그냥 선호 +보다 .getTime()... 그것은 간단하고 난 함수 이름을 기억할 필요가 없습니다

2
@TravisJ 굉장한 지름길? 컴퓨터 내부에 이미있는 숫자 값을 검색하려면 객체를 만들고 int를 테스트하는 연산자를 호출하고 마지막으로 함수 (getTime)를 호출하는 클래스 변환 메서드를 호출하는 함수 (valueOf)를 호출하는 변환을 트리거합니다. 값을 검색합니다. 그런 다음 객체는 운명에 버려지고 루프가 1000 회 반복 된 후 가비지 수집이 필요한 Date 객체를 1000 개 삭제하여 갑자기 모두 덤프되고 컴퓨터가 느려지는 동안 무슨 일이 일어나고 있는지 궁금해합니다. :) 대박!
FrancescoMM

7

당신이 같은 날짜 개체가 있다면

var date = new Date('2017/12/03');

그런 다음 valueOf () 인 밀리 초 형식으로 날짜를 가져 오기 위해 자바 스크립트에 내장 된 메소드가 있습니다.

date.valueOf(); //1512239400000 in milliseconds format

2

이것은 매우 오래된 질문이지만 여전히 다른 사람들이 그것을보고있는 경우 참조 용 requestAnimationFrame()으로 현대 브라우저에서 애니메이션을 처리하는 올바른 방법입니다.

업데이트 : mozilla 링크는이 작업을 수행하는 방법을 보여줍니다-링크 뒤의 텍스트를 반복하는 느낌이 들지 않았습니다.)


4
스택 오버플로에 오신 것을 환영합니다 ! requestAnimationFrame질문에 설명 된대로이 "점프"를 중지 시키는 기능에 대한 간단한 설명을 포함 할 수 있습니다 . 감사!
콴타스 94 헤비

2
requestAnimationFrame을 사용하더라도 모든 플랫폼에서 프레임 속도가 동일하다고 가정하지는 않으므로 현재 시간을 확인해야합니다.
Tom Boutell
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.