JavaScript setInterval()과 setTimeout()타이머

JavaScript 는 단일 스 레 드 언어 이지 만 시간 초과 와 간헐 시간 값 을 설정 하여 코드 를 지정 하여 특정한 시간 에 실행 할 수 있 습 니 다.시간 초과 값 은 지 정 된 시간 후에 코드 를 실행 하 는 것 을 말 하 며,간헐 시간 값 은 지 정 된 시간 마다 코드 를 실행 하 는 것 을 말한다.
시간 초과 호출
window 대상 을 사용 하 는 setTimeout()방법 을 초과 호출 합 니 다.실행 할 코드 와 밀리초 로 표시 할 시간(코드 실행 전 대기 시간)을 받 습 니 다.그 중에서 첫 번 째 인 자 는 문자열(eval()에서 사용 하 는 문자열 과 같 을 수도 있 고 함수 일 수도 있 습 니 다.

두 번 째 매개 변 수 는 얼마나 기 다 렸 는 지 를 나타 내 는 밀리초 이지 만 이 시간 이 지나 면 코드 가 반드시 실행 되 는 것 은 아 닙 니 다.JavaScript 는 단일 프로그램의 해석 기 이기 때문에 일정 시간 코드 만 실행 할 수 있 습 니 다.실행 할 코드 를 제어 하기 위해 자 바스 크 립 트 작업 대기 열 이 있 습 니 다.이 작업 들 은 작업 대기 열 에 추가 하 는 순서에 따라 실 행 됩 니 다.setTimeout()의 두 번 째 인 자 는 JavaScript 가 현재 작업 을 대기 열 에 추가 하 는 데 얼마나 걸 리 는 지 알려 줍 니 다.대기 열 이 비어 있 으 면 추 가 된 코드 는 즉시 실 행 됩 니 다.대기 열 이 비어 있 지 않 으 면 추 가 된 코드 는 앞의 코드 가 실 행 된 후에 실 행 됩 니 다.
setTimeout()을 호출 하면 시간 초과 호출 을 나타 내 는 수치 ID 를 되 돌려 줍 니 다.이 시간 초과 호출 ID 는 실행 코드 를 계획 하 는 유일한 식별 자 입 니 다.이 를 통 해 시간 초과 호출 을 취소 할 수 있 습 니 다.시간 초과 호출 사용 방법 clearTimeout()취소 하기;　　
　　
간헐 호출
간헐 호출 은 시간 초과 호출 과 유사 합 니 다.다만 지 정 된 시간 간격 으로 코드 를 반복 해서 실행 합 니 다.간헐 호출 이 취소 되 거나 페이지 가 마 운 트 해제 될 때 까지.간헐 호출 을 설정 하 는 방법 은 setInterval()입 니 다.받 는 매개 변 수 는 setTimeout()과 같 습 니 다.간헐 호출 취소 의 중요성 은 시간 초과 호출 보다 훨씬 높다.

그러나 일반적인 상황 에서 간헐 호출 을 진정 으로 사용 하 는 경 우 는 드물다.왜냐하면 뒤의 간헐 호출 은 이전의 간헐 호출 이 끝나 기 전에 호출 될 수 있 기 때문이다.따라서 우 리 는 보통 시간 초 조 를 사용 하여 간헐 적 호출 을 모 의 한다.
　　
다음은 두 개의 작은 demo 를 보 겠 습 니 다.
1.현재 날 짜 를 가 져 와 텍스트 상자 에 표시 하고"stop"단 추 를 누 르 면 이벤트 가 정 지 됩 니 다.(인 터 벌
HTML 코드:

<input type="text" size="50" id="clock" />
<input type="button" value="Stop" id="btn" />

JavaScript 코드:

function clock(){
  var time = new Date();
  document.getElementById("clock").value = time;  
  var btn =document.getElementById("btn");
  btn.onclick = function(){
    clearInterval(t); 
  }
}
var t = setInterval(clock,1000);

2.setTimeou()를 사용 하여 계수 통계 효 과 를 실현 하고 텍스트 상자 에 수 치 를 표시 합 니 다.
HTML 코드:

<input type="text" id="count" />

JavaScript 코드:

var num = 0;
function startCount(){
  document.getElementById("count").value = num;
  num += 1;
  setTimeout(startCount,1000);  //setTimeout     ，          
}  
setTimeout(startCount,1000);  //1s   

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.