JavaScript | setTimeout / setInterval

katej927·2022년 1월 14일
0

JavaScript

목록 보기
27/33
post-thumbnail

📌 호출 스케줄링(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)

참고

profile
복습 목적 블로그 입니다.

0개의 댓글