제로초 자바스크립트 입문 <비동기와 타이머>

동기 synchronous 는 앞선 작업이 완전히 끝난 후에 다음 작업이 실행되는 것

비동기 asynchronous 는 앞선 작업이 끝나지 않았는데도 다음 작업이 실행되는 것 

 

setTimeout( )

• 타이머 함수 중에서 가장 자구 사용하는 setTimeout( ) 함수는 지정한 시간 뒤에 코드가 실행
• 첫 번째 인수로 콜백함수, 두 번째 인수는 밀리초 단위이므로 초에 1000을 곱함
• setTimeout(함수, 밀리초);
• 첫 번째 인수에 넣는 함수를 외부에서 가져올 수 있다
• setTimeout( ) 함수를 비동기라고 하는 이유는 setTimeout( ) 뒤에 나오는 코드를 더 먼저 실행하기 때문
• setTimeout( ) 에 넣은 함수는 동기 코드가 모두 실행되고 난 뒤 실행 

setInterval( )

• 자바스크립트는 자체적으로 반복 기능을 수행하는 setInterval( ) 함수를 제공
• setInterval( ) 함수는 지정한 시간마다 주기적으로 지정한 함수를 실행 
• setInterval(함수, 밀리초);

clearTimeout( ) 과 clearInterval( )

• clearTimeout( ) 과 clearInterval( ) 함수는 웹 페이지를 닫을 때까지 계속 실행되므로 중간에 끄는 방법이 필요하다
• setTimeout( ) 함수는 clearTimeout( ) 함수로, setInterval( ) 함수는 clearInterval( ) 함수로 실행을 취소할 수 있다

const 아이디 = setTimeout(함수, 밀리초);
clearTimeout(아이디);
const 아이디 = setInterval(함수, 밀리초);
clearInterval(아이디);

• 단, clearTimeout( ) 함수는 setTimeout( ) 함수의 콜백 함수가 아직 실행되지 않았을 때만 취소할 수 있다