[자바스크립트] 타이머 함수 예제

타이머 함수 예제

함수 이름	설명
setTimeout(함수, 시간)	일정 시간 후 함수 실행
setInterval(함수, 시간)	일정 시간 간격으로 함수 반복 실행
clearTimeout(id)	실행되고 있는 timeout 을 중지
clearInterval(id)	실행되고 있는 interval 을 중지

예제 1. 버튼누르고 3초 뒤 alert();

function ex01(){
    var sec = 300;
    setText(); // 카운트 다운 모드
 
    //alert()호출 함수
    function alertFunc() {
        alert('짜잔');
    }
 
    //3,2,1 카운트 다운으로 text 변환 함수
    function setText(){
        document.getElementById('ex01Btn').innerText = sec--;
    }
 
    //3초뒤 alert 호출 함수 호출
    setTimeout(alertFunc, 3005);
 
    //0.01초 간격으로 3초 동안 text 변
    var intervalID = setInterval(setText, 1000);
    setTimeout(function(){
        clearInterval(intervalID);
        document.getElementById('ex01Btn').innerText = '실행';
    }, 3000);
}

실행

예제 2. 2000년도에 유행했던 놀이

var ex02state = 'stop';
var inverval1;
var inverval2;
function ex02() {
    var arr1= ['군대', '사무실', '클럽', '편의점', '화장실', '사장실'];
    var arr2= ['게임을 할 것입니다.', '라면을 먹을 것 입니다.',
                    '춤을 출 것입니다.', '쫓겨날 것입니다.',
                    '연애를 할 것입니다.', '명상을 할 것입니다.',
                    '고백을 할 것입니다.'];
    var idx1 = 0;
    var idx2 = 0;
 
    if(ex02state == 'stop') {
        interval1 = setInterval(setText01, 30);
        interval2 = setInterval(setText02, 20);
        ex02state = 'start';
    }else {
        clearInterval(interval1);
        clearInterval(interval2);
        ex02state = 'stop';
    }
 
    function setText01() {
        if(idx1 >= arr1.length) {
                idx1 = 0;
        }
        $('#ex02_1').text(arr1[idx1++]);
    }
    function setText02() {
        if(idx2 >= arr2.length) {
                idx2 = 0;
        }
        $('#ex02_2').text(arr2[idx2++]);
    }
}

   당신은 올 해  에서