timer

호출 스케줄링

함수를 명시적으로 호출하지 않고, 일정 시간이 경과된 이후 호출되도록 타이머 함수를 사용하여 함수 호출을 예약한다.

• 타이머를 생성할 수 있는 함수: setsetTimeout,setInterval
  • 일정 시간이 경과된 이후 콜백 함수가 호출되도록 타이머 생성. 생성된 타이머가 만료되면 콜백함수가 호출됨.
  • setTimeout: 이 함수가 생성한 타이머는 단 한번동작. 타이머 만료시 단 한번호출.
  • setInterval: 이 함수가 생성한 타이머는 반복 동작. 타미어 만료될 때마다 반복호출.
• 타이머를 제거할 수 있는 함수: clearTimeout, clearInterval

setTimeout()

지정된 시간이 경과 한 후 특정 코드 블록을 한 번 실행.

• 필요한 파라미터

  • 실행할 함수 또는 다른 곳에 정의 된 함수 참조.
  • 코드를 실행하기 전에 대기 할 밀리세컨드 단위의 시간 간격 (1000밀리세컨드는 1 초)을 나타내는 숫자. 값을 0으로 지정하면(혹은 이 값을 모두 생략하면) 함수가 즉시 실행된다.
  • 함수가 실행될 때 함수에 전달해야할 파라미터를 나타내는 0이상의 값.

• 매개변수
  setTimeout () 내에서 실행되는 함수에 전달하려는 모든 매개변수는 setTimeout () 매개변수 목록 끝에 추가하여 전달해야 한다.

// 익명함수 실행
let myGreeting = setTimeout(function () {
  alert("Hello, Mr. Universe!");
}, 2000);

// setTimeout()에 함수 참조를 전달.
// timeout 함수와 이벤트에 의해 중복 호출되는 함수를 사용하려면 이 방법이 유용할 수 있다.
// 이 방법은 코드라인을 깔끔하게  정리하는 데 도움을 준다.

// With a named function
let myGreeting = setTimeout(function sayHi() {
  alert("Hello, Mr. Universe!");
}, 2000);

// With a function defined separately
function sayHi() {
  alert("Hello Mr. Universe!");
}

let myGreeting = setTimeout(sayHi, 2000);

clearTimeout()

타임아웃이 생성되면(setTimeout()이 실행되면) 특정시간이 경과하기 전에 clearTimeout()을 호출하여 타임아웃을 취소할 수 있다. clearTimeout()은 setTimeout()콜의 식별자를 매개변수로 setTimeout()에 전달한다.

---

setInterval()

지정된 시간이 경과 후, 두 번째 매개 변수에 주어진 시간까지 반복적으로 실행됨.

function displayTime() {
  let date = new Date();
  let time = date.toLocaleTimeString();
  document.getElementById("demo").textContent = time;
}

const createClock = setInterval(displayTime, 1000);

clearInterval()

위와 같이 별다른 중지 사항을 명시하지 않으면 계속 반복해서 실행됨. 아래와 같이 setInterval()에 의해 반환된 식별자를 clearInterval()에 전달하여 작업을 취소할 수 있다.

function displayTime() {
  let date = new Date();
  let time = date.toLocaleTimeString();
  document.querySelector(".clock").textContent = time;
}

displayTime();
const createClock = setInterval(displayTime, 1000);
// clearInterval 사용 시 setInterval 작업 취소
clearInterval(createClock);

---

Preferences
poiemaweb
MDN