[JavaScript] 타이머(timer)

2022. 7. 5. 20:03·Language/JavaScript
728x90

타이머(timer)

window 객체는 일정 시간이 지난 뒤에 함수를 호출할 수 있도록 다음 메소드를 제공한다.

  • setTimeout()
  • setInterval()

또한, 이렇게 설정된 함수의 호출을 취소할 수 있도록 다음 메소드를 제공한다.

  • clearTimeout()
  • clearInterval()

setTimeout() 메소드

setTimeout() 메소드는 명시된 시간이 지난 뒤에 지정된 함수를 호출한다.

// 문법
window.setTimeout(호출할함수, 지연시간);

이 메소드가 성공적으로 호출되면, 설정된 timeoutID를 반환한다.

이 메소드는 밀리초(milliseconds) 단위로 지연 시간을 설정할 수 있다.

function startTimeout() {
    setTimeout(printCurrentDate, 2000);
}
function printCurrentDate() {
    document.getElementById("date").innerHTML = new Date();
}

setInterval() 메소드

setInterval() 메소드는 지정된 시간 간격마다 지정된 함수를 반복적으로 호출한다.

// 문법
window.setInterval(호출할함수, 지연시간);

이 메소드가 성공적으로 호출되면, 설정된 timeoutID를 반환한다.

이 메소드는 밀리초(milliseconds) 단위로 시간 간격을 설정할 수 있다.

function startInterval() {
    setInterval(printCurrentDate, 2000);
}
function printCurrentDate() {
    document.getElementById("date").innerHTML += new Date() + "<br>";
}

clearTimeout() 메소드

setTimeout() 메소드의 반환값을 clearTimeout() 메소드의 인수로 전달하면, 계획된 함수의 호출을 취소할 수 있다.

// 문법
window.clearTimeout(timeoutID);

이 메소드는 setTimeout() 메소드에 의해 함수가 호출되기 전에 실행되어야 호출을 취소할 수 있다.

함수가 호출된 이후에 이 메소드를 호출하면 아무런 동작도 하지 않는다.

var timeoutId;
function startTimeout() {
    timeoutId = setTimeout(printCurrentDate, 2000);
}
function cancelTimeout() {
    clearTimeout(timeoutId);
}
function printCurrentDate() {
    document.getElementById("date").innerHTML += new Date() + "<br>";
}

clearInterval() 메소드

setInterval() 메소드의 반환값을 clearInterval() 메소드의 인수로 전달하면, 반복되는 함수의 호출을 취소할 수 있다.

// 문법
window.clearInterval(timeoutID);
var timeoutId;
function startInterval() {
    timeoutId = setInterval(printCurrentDate, 2000);
}
function cancelInterval() {
    clearInterval(timeoutId);
}
function printCurrentDate() {
    document.getElementById("date").innerHTML += new Date() + "<br>";
}

'Language > JavaScript' 카테고리의 다른 글

[JavaScript] 이벤트 리스너 등록  (0) 2022.07.05
[JavaScript] 이벤트의 개념  (0) 2022.07.05
[JavaScript] 대화 상자  (0) 2022.07.05
[JavaScript] Navigator 객체  (0) 2022.07.05
[JavaScript] Screen 객체  (0) 2022.07.05
'Language/JavaScript' 카테고리의 다른 글
  • [JavaScript] 이벤트 리스너 등록
  • [JavaScript] 이벤트의 개념
  • [JavaScript] 대화 상자
  • [JavaScript] Navigator 객체
arajo
arajo
  • arajo
    아라 메모장
    arajo
  • 전체
    오늘
    어제
    • 분류 전체보기 (509)
      • Language (298)
        • HTML (55)
        • CSS (11)
        • JavaScript (70)
        • TypeScript (8)
        • Python (33)
        • Java (119)
        • C (0)
        • C# (2)
      • Programming (92)
        • Programming (14)
        • Web (51)
        • Apache (1)
        • MySQL (23)
        • AWS (3)
      • Framework | Library (26)
        • Framework | Library (3)
        • Vue.js (2)
        • React.js (5)
        • React Native (4)
        • Node.js (1)
        • Ajax (1)
        • Bootstrap (8)
        • Spring (1)
        • Flutter (1)
      • etc (2)
      • 휴식 (19)
        • 책 (13)
        • 일기 (5)
        • 게임 일기 (1)
      • A (71)
        • 공부 (18)
        • 기타 (6)
        • 일 (47)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    CSS
    Python
    object
    web
    array
    TypeScript
    JavaScript
    MySQL
    자바스크립트
    파이썬
    리액트
    Java
    변수
    제어문
    HTML
    타입스크립트
    react
    next.js
    event
    객체
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.1
arajo
[JavaScript] 타이머(timer)
상단으로

티스토리툴바