Web & Mobile/JavaScript

[JavaScript] setTimeout(), setInterval() 차이

byunghyun23 2020. 8. 11. 03:28

1. setTimeout()

      • 일정 시간 후에 함수 호출

 

다음 스크립트를 실행하면 3초 뒤 "Don't turn it off" 알람이 나타난다.

function warning(msg) {
	alert(msg);
}

setTimeout(warning, 3000, "Don't turn it off");

 

다음과 같은 형태로 작성할 수도 있다.

setTimeout(function (msg) { 
    alert(msg);
}, 3000, "Don't turn it off");

 

2. setInterval()

      • 주기적으로 일정 시간 후에 함수 호출

 

일정 간격으로 함수를 계속 호출한다.

배너, 게시판 등의 내용을 번갈아 보여주고자 할 때 setInterval()를 사용할 수 있다.

var bannerNumber = 0;

setInterval(function() {
    bannerNumber++;
    
    if (bannerNumber == 1) {
        $(".banner_first").show();
        $(".banner_second").hide();
        $(".banner_third").hide();
    }
    else if (bannerNumber == 2) {
        $(".banner_first").hide();
        $(".banner_second").show();
        $(".banner_third").hide();
    }
    else if (bannerNumber == 3) {
        $(".banner_first").hide();
        $(".banner_second").hide();
        $(".banner_third").show();
        bannerNumber = 0;
    }
    
}, 3000);