본문 바로가기

Development/JavaScript

[JavaScript] 시간지연 함수

- 시간지연 함수 setTimeout(){}


함수실행 시간을 의도적으로 지연한 뒤 실행하고 싶을때 사용하는 함수


setTimeout(function(){실행할 함수},지연시간);


자바스크립트 함수 중에서도 자주 사용되는 함수 중 하나로 지연시간은 밀리세컨드 단위로 설정(1000 = 1초)


* 함수예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
    var sNum = 1;
    var eNum = 10;
    var sum = 0;
 
    var sumNum = function(sNum, sum){
        setTimeout(function () {
            console.log("sum : " + sum);
        }, sNum * 1000);
    }
 
    for(sNum;sNum < eNum+1;sNum++){
        sum = sum + sNum;
        sumNum(sNum, sum);
    }
</script>
cs


위 함수예제는 1~10 까지의 숫자를 매 1초가 지날 때 마다 합산하여 값을 출력하는 함수이다.


* 함수실행 결과

1
2
3
4
5
6
7
8
9
10
sum: 1
sum: 3
sum: 6
sum: 10
sum: 15
sum: 21
sum: 28
sum: 36
sum: 45
sum: 55
cs



시간지연 함수는 사용자의 페이지가 로드된 뒤 팝업창을 띄우거나 검색창 또는 일부 섹션을 몇 초 뒤에 사라지게 하고 싶을 경우 등 다양하게 활용할 수 있다.