javascript setTimeout / setInterval

* setTimeout: 일정 시간이 지난 후 함수 실행

-2개의 매개변수를 받음

fn: 일정 시간이 지난 뒤 실행하는 함수 / 3000: 시간(=3s)

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

setTimeout(function(){
  console.log(3)
},3000);
//동일하게 동작

-인수가 필요할 경우 시간 뒤에 , 추가해서 적으면 됨

-showName: 함수 / 3000: 시간 / 'Mike': 인수. 해당 함수의 첫번째 인수로 전달

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

 ◎ clearTimeout(tId): 예정된 작업을 없애줌. setTimeout은 time Id를 반환하는데 이것을 이용하면 스케줄 취소 할 수 있음

3초가 지나기 전에 clearTimeout이 실행되어 아무 일도 일어나지 않게 됨.

function showName(name){
  console.log(name);
}
const tId = setTimeout(showName,3000,'Mike');
clearTimeout(tId);

 

* setInterval: 일정 시간 간격으로 함수를 반복

-setTimeout과 사용법은 동일. 3초마다 Mike가 console에 찍힘

function showName(name){
  console.log(name);
}
const tId = setInterval(showName,3000,'Mike');

◎clearInterval(tId); : 중간에 중단하고 싶을 경우 사용

 

- 주의사항: delay 타임을 0으로 줘도 실제 바로 실행되지 않음

-> 현재 실행중인 스크립트가 종료된 이후의 스케줄인 함수를 실행. 그리고 브라우저는 기본적으로 4ms 정도의 기본 대기시간이 있기 때문에 0이라고 시간을 적어도 4ms 혹은 그 이상이 걸릴 수 있음

setTimeout(function(){
  console.log(2)
},0); //2번째 실행
console.log(1); //1번째 실행

 

예시) 유저의 접속 시간 표시

1초에 한번씩 콘솔창에 텍스트 표시됨

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

setInterval(showTime, 1000);

-5초까지만 실행하고 싶은 경우

let num = 0; //초기값
function showTime() {
  console.log(`안녕하세요. 접속하신지 ${num++}초가 지났습니다.`);
  if(num >5){
  clearInterval(tId);
  }
}

const tId = setInterval(showTime, 1000);

 

 

---

웹디자인기능사 시험칠 때 이 함수 사용한 기억이 나는데 손코딩 면접에서 다 까먹고 긴장해서 와장창,, 말아먹은 ㅎ,, 그 때는 얼레벌레 자격증 합격을 위해 급하게 암기해서 휘발됐다면 이번에 제대로 알게된거 같음! 진짜인지는 나도 모름,,