본문 바로가기
웹개발/JavaScript

[자바스크립트] 함수 만들기, setTimeout, setInterval

by 철없는민물장어 2023. 1. 21.
728x90
반응형
function
function 함수명(인자){
  document.getElementById('alert').style.display = 인자;
}

함수 선언 예시이다.

인자를 사용할 때는 따로 $표시 붙일 필요 없이 그냥 쓰면 된다.

 

 function printAlert(time){
            $('.alert').html( time+ '초 남았어요')  ;
        }

간단하게 +로 인자와 문자열을 붙일수도 있다.

 


 

setTimeout, setInterval
        setTimeout(function(){
            $('.alert').hide();
        },5000);

setTimeout(콜백함수,시간(ms단위))

로 사용할 수 있다.

인자로 넣은 시간만큼 지나면 콜백함수가 실행된다.

위 예시는 5초 후에 .alert 클래스 요소를 hide하게 된다.

 

var time=5;
        setInterval(function(){ 
            time--;
            printAlert(time);
            if(time<0){
                $('.alert').hide();
                
            }
        },1000)

setInterval(콜백함수, 시간)은 인자로 넣은 시간만큼 지날 때마다 콜백함수가 실행된다.

위 예시는 1초마다 function이 실행된다.

 

변수 time의 값을 1초마다 1씩 감소시키고,

printAlert를 실행한다.

time이 0보다 작아지면 .alert요소를 hide한다.

 

setTimeout, setInterval을 이용하여 타이머 등을 만들어 볼 수 있다.

728x90
반응형

댓글