setTimeout 사용 방법
기본용법은 아래와 같습니다.( [] 대괄호 안의 내용은 생략 가능한 파라미터 입니다.)
setTimeout( 함수 [, 지연시간, 파라미터1, 파라미터2, ...])
주 용도
- 일정시간 이후 후 동작
- 반복 실행
- 비동기 동작
일정시간 이후 동작 예제
setTimeout 은 아래 예제와 같이 특정시점에서 일정시간 이후 특정 스크립트 동작을 하기 위해 사용합니다. 만약 실행 되기 전 중단하고 싶으면 clearTimeout(myTimeout)을 해주면 됩니다.
<!DOCTYPE html>
<html>
<body>
<h1>The Window Object</h1>
<h2>The setTimeout() Method</h2>
<p>3초 후 알람이 표시됩니다.</p>
<button onclick="myStopFunction()">Stop!</button>
<h2 id="demo"></h2>
<script>
const myTimeout = setTimeout(myInfo, 3000);
function myInfo() {
document.getElementById("demo").innerHTML = "알람!"
}
function myStopFunction(){
clearTimeout(myTimeout);
}
</script>
</body>
</html>
반복실행의 예제 입니다.
실행해서 확인해 보신분은 아시겠지만 인터벌(interval)을 사용했을 때와는 조금 차이가 있습니다. 기회가 되면 추가로 설명하겠습니다.
<!DOCTYPE html>
<html>
<body>
<h1>The Window Object</h1>
<h2>The setTimeout() Method</h2>
<p>반복실행 예제 입니다.</p>
<button onclick="myStopFunction()">Stop!</button>
<h2 id="demo"></h2>
<script>
function myStopFunction(){
clearTimeout(timerId);
}
let timerId = setTimeout(function tick() {
alert(‘짜안’);
timerId = setTimeout(tick, 2000); // (*)
}, 2000);
</script>
</body>
</html>
비동기(async) 동작
기본적으로 setTimeout은 비동기로 동작합니다. 싱글스레드(동기-sync)를 지원하는 자바스크립트에서 setTimeout이 비동기로 동작할 수 있는 이유는 setTimeout은 WebAPI(브라우저 내장API) 에서 동작하기 때문인데요. 자세히 들어가기에는 좀 복잡하고 저도 완벽히 이해하진 못했습니다. 간단하게 비동기 동작인 setTimeout 이나 Ajax, DOM 같은 것들은 자바스크립트 엔진이 아닌 브라우저 제공 api에서 동작한다고 생각하시면 됩니다. 그래서 기본적으로 싱글스레드인 자바스크립트에서 setTimeout은 비동기로 동작할 수 있는것이죠. 사실 저는 시간지연보다 비동기 동작을 필요로 하는 작업에 setTimeout을 더 많이 활용합니다.
이상 javascript 에서의 setTimeout의 쓰임과 동작하는 방식에 대해 알아봤습니다. 혹시 내용 중 틀린것이 있다만 주저말고 지적 부탁드립니다. 이 글을 보는 다른 사용자가 잘못된 정보를 얻어갈 수도 있기 때문에 지적해 주시면 감사하겠습니다.
'개발' 카테고리의 다른 글
| javascript 로 문자열 압축 하기 (0) | 2023.02.23 |
|---|---|
| min.js 형태를 .js 형태로 변환해 주는 페이지 (min.js to js) (0) | 2023.01.16 |
| jquery id에 특정 문자열이 포함된 객체 찾기 (0) | 2022.10.28 |
| 안드로이드 All WebView methods must be called on the same thread 오류 수정 (0) | 2020.07.19 |
| URL 스티링에서 특정 파라메터를 구하는 javascript 문입니다. (0) | 2020.07.16 |
댓글