setTimeout, setInterval, clearTimeout

shin·2021년 8월 26일
0

javascript

목록 보기
23/23
  • setTimeout 일정시간 뒤에 함수를 실행한다
  • setInterval 일정시간 간격으로 함수를 반복한다.

setTimeout

function fn() {
    console.log(3);
}
setTimeout(fn, 3000);

// 위 아래 코드 모두 같은 의미이다.
setTimeout(() => {
    console.log(3);
}, 3000);
-------------------------------------------------------------------------------
function showName(name) {
    console.log(name);
}

setTimeout( showName, 3000, 'Mike');
        //   함수      시간   인수(showName함수의 인수로 전달된다)

clearTimeout

clearTimeout() 예정된 작업을 없앤다.

setInterval

function showName(name) {
    console.log(name);
}

const a = setInterval( showName, 3000, 'Mike');
// 3초마다 Mike가 생성된다
// 중간에 멈추려면 clearTimeout(a)를 사용하면 된다.

delay = 0 ????

setTimeout(() => {
    console.log(2);
}, 0);

console.log(1);
// 0초가 되도 바로 2가 실행되는 것이 아니라 1이 실행되고 2가 실행된다.
// 브라우저는 기본적으로 4ms~ 이상의 대기시간이 있다

setInterval, clearTimeout 활용

let num = 0;

function showTime() {
    console.log(`대기시간 ${num++}초가 지났습니다`);
}
setInterval(showTime,1000);

=>대기사간 0초가 지났습니다
  대기사간 1초가 지났습니다
  대기사간 2초가 지났습니다
          .
          .
  무한 반복된다

중간에 정지하고 싶다면 clearTimeout을 사용하면 된다.

let num = 0;

function showTime() {
    console.log(`대기시간 ${num++}초가 지났습니다`);
    if(num > 5){
    clearTimeout(iTd);
}
const tId = setInterval(showTime,1000);
=>대기사간 0초가 지났습니다
  대기사간 1초가 지났습니다
  대기사간 2초가 지났습니다
          .
          .
  대기사간 5초가 지났습니다
  5초에서 멈춘다

0개의 댓글