12. setTimeout/setInterval

setTimeout

: 일정시간이 지난 후 함수를 실행
setTimeout(fn, s)

• fn : 일정시간이 지난 후 실행할 함수
• s : 함수를 실행할 시간 지정 (ms)
  • 1000 : 1초

function fn(){
    console.log('3초');
}

setTimeout(fn, 3000);
// 3초

• setTimeout() 안에 함수를 직접 작성하는 것도 가능

setTimeout(function(){
	console.log('3초 후..!');
}, 3000);

• 세 번째 인자로 함수에 넣을 인수 전달 가능
  • 여러개의 인자도 전달 가능

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

setTimeout(fn, 3000, '성원');
// 성원

function fn(name1, name2){
    console.log(`${name1} loves ${name2}`);
}

setTimeout(fn, 3000, '성원', '달봉');

clearTimeout(tId)

: 예정된 작업을 제거함

• setTimeout()은 timeId를 반환하는데, 이것을 이용하여 스케쥴링 취소 가능

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

const tId = setTimeout(fn, 1000, '성원');
// tId = 9

clearTimeout(tId);
// 1초가 지나기 전에 clearTimeout이 시행되기 때문에 아무일도 일어나지 않음

console창에 tId를 찍으면 숫자가 나옴. 해당 숫자가 setTimeout의 time ID인가??

setInterval

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

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

const tId = setInterval(fn, 1000, '성원');
// 1초마다 '성원'이 출력

clearInterval(tId)

: setInterval() 작업 취소

주의

• 실행시간을 0 으로 지정해도 실제로는 곧바로 시행되지 않음
  • 현재 실행중인 스크립트가 종료된 이후 스케쥴링 함수를 실행하기 때문
  • 브라우저는 기본 4ms정도의 대기시간이 있기 때문에, 실행시간을 0으로 설정해도 4ms 이상의 실행시간이 걸림

setTimeout(function(){
	console.log('2222');
}, 0);

console.log('111');

---

예제

• 유저가 얼마동안 접속해있는지 보여줌

// 유저가 접속중인 시간초를 보여줌
let s = 0;
const fn = setInterval(function(){
  console.log(`접속한지 ${s++}초 경과하였습니다.`);
}, 1000);

// clearInterval(fn);

// 접속한지 0초 경과하였습니다.
// 접속한지 1초 경과하였습니다.
...

• 위 코드를 5초동안만 실행하고 멈추기

let s = 0;
const tId = setInterval(function(){
  console.log(`접속한지 ${s++}초 경과하였습니다.`);
  if(s > 4){
    clearInterval(tId);
  }
}, 1000);

// "접속한지 0초 경과하였습니다."
// "접속한지 1초 경과하였습니다."
// "접속한지 2초 경과하였습니다."
// "접속한지 3초 경과하였습니다."
// "접속한지 4초 경과하였습니다."
// 정지

let s = 0;
const tId = setInterval(function(){
  console.log(`접속한지 ${s++}초 경과하였습니다.`);
}, 1000);

clearTimeout(clearInterval(tId), 5000);
/*
오류!
Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src chrome://resources chrome://test chrome://webui-test 'self'".
*/

setTimeout(clearInterval(), 1000)과 같이 setTimeout과 clearInterval은 함께 사용 불가?