자바스크립트 타이머 해석 I

참고: 이 기사는 John Resig 의 "JavaScript Ninja의 비밀"이라는 책에서 발췌한 것입니다. 번역에 결함이 있는 경우 수정해 주시기 바랍니다.

이 문서에서는 주로 다음 측면에서 타이머를 설명합니다.

1. 타이머 개요;
2. 타이머 속도에 대한 심층 분석
3. 대규모 작업을 처리하려면 타이머를 사용하세요.
4. 타이머를 사용하여 애니메이션을 관리하세요.
5. 더 나은 타이머 테스트

타이머는 우리가 거의 이해하지 못하고 종종 남용되는 JavaScript의 기능입니다. 실제로 복잡한 애플리케이션 개발에 많은 도움이 될 수 있습니다. 타이머는 코드 조각의 실행을 비동기적으로 지연시키는 기능을 제공합니다. JavaScript는 본질적으로 단일 스레드입니다(js 코드의 일부만 특정 시간 범위 내에서 실행될 수 있음). 타이머는 이러한 제한을 피할 수 있는 방법을 제공합니다. 코드를 실행하는 다른 방법을 생각해 보세요.

흥미롭게도 일반적으로 받아들여지는 믿음과는 달리 타이머는 JavaScript 언어의 일부가 아니라 브라우저에 의해 도입된 메서드 및 개체의 일부입니다. 이는 브라우저가 아닌 환경에서 실행하기로 선택한 경우 타이머가 존재하지 않을 가능성이 높으며 특정 기능(예: Rhino 스레드)을 사용하여 자신만의 버전을 구현해야 한다는 의미입니다.

1. 타이머 작동 방식

기본적으로 타이머의 작동 방식을 이해하는 것이 중요합니다. 타이머의 동작은 별도의 스레드에 있기 때문에 직관적이지 않은 경우가 많습니다. 세 가지 기능에 대한 테스트부터 시작하겠습니다. 각 기능에 대해 타이머를 구축하고 제어할 수 있습니다.

• var id = setTimeout(fn,delay); 이 함수는 나중에 타이머를 취소할 수 있는 고유 ID를 반환합니다.
• var id = setInterval(fn,delay); setTimeout과 유사하지만 취소될 때까지 특정 지연 시간에 함수를 계속 호출합니다.
• clearInterval(id),clearTimeout(id); 타이머의 ID(위 함수 중 하나에 의해 반환됨)를 수락하고 타이머 호출을 중지합니다.

타이머가 내부적으로 작동하는 방식을 이해하려면 지연이 보장되지 않는다는 중요한 개념을 논의해야 합니다. 브라우저의 모든 JavaScript는 단일 스레드에서 실행되므로 비동기 이벤트(예: 마우스 클릭, 타이머)는 실행 중 열린 상태가 있을 때만 실행됩니다. 다음 예는 이 문제를 잘 보여줍니다.

이 다이어그램에는 소화해야 할 정보가 많이 있습니다. 완전히 이해하면 비동기 js 실행에 대한 더 나은 아이디어를 얻을 수 있습니다. 다이어그램은 1차원이며 수직 방향은 밀리초 단위로 측정되는 시간(벽시계)입니다. 파란색 상자는 js 실행 비율을 나타냅니다. 예를 들어 첫 번째 JavaScript 블록을 실행하는 데 약 18초가 걸리고 마우스 클릭에는 약 11초가 소요됩니다.