ES6 javascript : setTimeout vs setInterval - 호출 스케줄링 함수

setTimeout vs setInterval
비동기 처리 방법 - Promise, Generator 함수를 이용한 비동기 처리

호출 스케줄링 함수 setTimeout(), setInterval()

setTimeout()	setInterval()
일정 시간 "후에" 함수를 한번만 실행	일정시간"마다" 함수를 주기적으로 실행
호출 스케줄링 취소 - clearTimeout	호출 스케줄링 취소 - clearInterval

 

setTimeout()

-  setTimeout(함수명, 지연시간, 인자값) : 지연호출, 시간단위는 millisecond, 1000=1초 , 기본값 0

function testHello(){
    console.log("hello!");
}

//1
testHello();
//2
setTimeout(testHello,4000)
//3
console.log("bye~");

// 1 	-> 3 	-> 2
// hello! -> bye~ -> hello! 순으로 출력된다 = 비동기 처리방식

 

 = 비동기 처리방식
 : 4초를 기다렸다가 다음 코드를 수행하는 것이 아니라,
 일단 setTimeout()을 실행한 후, 바로 다음 코드인 console.log("bye~")로 넘어가 출력하였습니다.

 

 

function testHello2(t){
    console.log(t);
}
setTimeout(testHello2,2000,"hi~"); // 주의! 함수명만 기재 (함수 호출이 아님.)
// 2초뒤에 'hi~' 출력

setTimeout(console.log('a'), 4000); //'a' - 지연이 되지 않고, 바로 함수가 실행됨.
setTimeout((a)=>console.log(a), 4000, 'a'); //4초뒤에 'a' 출력

 

 

setTimeout 호출 > 타이머 식별자 반환 > 숫자(number)

const tid=setTimeout((a)=>console.log(a), 4000,"안녕");
console.log("호출 >>",tid); //호출 >> 36105
//4초 뒤에 '안녕' 출력

const ti=setTimeout((a)=>console.log(a), 2000,"aaa");
console.log("호출 >>",ti); //호출 >>39340
//2초 뒤에 'aaa' 출력

 

 

setInterval()

// 1초 간격으로 문자열 출력
const Iid=setInterval(()=>console.log('korea'), 1000);

//중지하는 방법
const myStop=(Iid)=>{
    clearInterval(Iid);
}

//즉시 중지하기
myStop(Iid);


//5초 뒤에 중지하기 (지연호출)
//방법 1
setTimeout(myStop, 5000, Iid);
//방법 2
setTimeout(()=>{myStop(Iid)},5000);

//틀린 방법
setTimeout(myStop(tid),5000); // 즉시 중지됨.

setTimeout(()=> console.log('aaa'),3000); //1번만 출력 - 'aaa'
setInterval(console.log('setInterval'),2000) //1번만 출력 - 주기적인 출력x

//올바른 방법
setInterval(()=>console.log('setInterval'),2000) //함수가 안에 있을때, 주기적으로 반복실행

 

계속 증가하는 값을 clearInterval() 사용하여 중지

// 10초 동안, '타이머 식별자' 1초마다 출력하기
let count=0;
let Iid2=setInterval(()=>{
    console.log(Iid2);
    count++;
    if(count==10){
     clearInterval(Iid2);
    }
},1000)

 

 

연습문제 ) 2초마다 출력하는 시계를 만들어라!

//방법 1
function myClock(){
    let d=new Date();
    //월 return 값은 --> 0~11, 0부터 시작 --> +1
    console.log('현재시각은', d.getMonth()+1,'월',d.getDate(),'일 ', d.getHours(),'시 ',d.getMinutes(),'분 ', d.getSeconds(),'초 입니다.');
}
let clock=setInterval(myClock, 2000);
setTimeout(()=>{clearInterval(clock)}.10000); //10초 동안만.


//방법 2
let cnt=0
function myClock(){
    let d=new Date();
    console.log('현재시각은', d.getMonth()+1,'월',d.getDate(),'일 ', d.getHours(),'시 ',d.getMinutes(),'분 ', d.getSeconds(),'초 입니다.');
	cnt++
    if(cnt!=10){ //20초 동안
    setTimeout(myClock,2000)
    }
}
myClock();