JavaScript | setTimeout / setInterval

Kate Jung·2022년 1월 14일

JavaScript setInterval setTimeout 코딩앙마

JavaScript

목록 보기

27/39

📌 호출 스케줄링(scheduling a call)

일정 시간이 지난 후에 원하는 함수를 예약 실행(호출)할 수 있게 하는 것

구현 방법

setTimeout, setInterval

📌 setTimeout

일정 시간이 지난 후, 함수를 실행

🔹 사용법

setTimeout(함수, 시간, 인수)

매개변수
- 첫 번째
  
  실행하는 함수(일정 시간이 지난 뒤)
- 두 번째
  
  시간
- 세번째
  
  함수에 들어갈 인수
예정된 작업을 없애려면

clearTimeout 실행

🔹 delay가 0일 경우

바로 실행 x

이유

현재 실행 중인 스크립트가 종료된 이후, 스케줄링 함수를 실행하기 때문

0이라고 적어도 바로 실행 x.

브라우저는 기본적으로 4ms 정도의 대기 시간이 있음. ( 0이라고 적어도 4ms 혹은 그 이상이 걸릴 수 있다는 것. )
예시 코드

    setTimeout(function(){
      console.log(2)
    }, 0)
    console.log(1)
    // 콘솔에 1 다음 2가 찍힘

🔹 예시 코드

3초 후에 로그를 찍어주는 코드

    function fn(){
      console.log(3)
    }
    
    setTimeout(fn, 3000) // 3000은 3초
    
    // 위와 같은 코드 (함수를 전달하지 않고 직접 작성)
    setTimeout(function(){
      console.log(3)
    }, 3000)

인수가 있는 경우

    function showName(name){
      console.log(name)
    }
    
    setTimeout(showName, 3000, 'Mike') // 'Mike'

clearTimeout 활용

    let timer = setTimeout( someFunction, 1000 );
    
    clearTimeout(timer); // 아무 일 없음

📌 setInterval

반복 수행

🔹 사용법

setTimeout 과 동일
중단하려면

clearInterval 실행

🔹 예시 코드

[ 1 ] n초마다 인수를 찍는 함수

    function showName(name){
      console.log(name)
    }
    
    const tid = setInterval(showName, 3000, 'Mike' ) // 3초 마다 'Mike' 찍힘
    
    ---
    
    // clearInterval을 통해 중단
    clearInterval(tid)

[ 2 ] 접속한 경과 시간 초단위로 보여주는 함수

    let num = 0;
    
    function showTime() {
      console.log(`안녕하세요. 접속하신지 ${num++}초가 지났습니다.`);
    }
    
    setInterval(showTime,1000)

    // 5초 동안만 보여주려고 할 경우
    // 방법: 5번 실행 후, clearInterval한다.
    
    let num = 0;
    
    function showTime() {
      console.log(`안녕하세요. 접속하신지 ${num++}초가 지났습니다.`);
      
      if(num>5){
        clearInterval(tid)
      }
    }
    
    const tid = setInterval(showTime,1000)