[Java script] setInterval(), clearInterval() 응용

ID of setInterval = setInterval('function', time);

 - function을 time 간격으로 자동 실행.

 

clearInterval(ID of setInterval);

 - setInterval된 function을 중지.

 

-----------------------------------------------------------------------------------------------------

 

<script language='javascript'>

var dom;

var num;

var intervalobj;    //ID of setInterval

 

//1초 간격으로 실행 될 함수

function fdelay(){

        var dom = $("#guide");

        var domTmp = dom.html();

        var arr = domTmp.split(" ");

        var num = arr[0]-1;

        dom.html(num + " 초 후 새로고침");

        if(num == 0)

                window.location.reload();

}

 

//setInterval() 함수 취소

//clearInterval(ID of setInterval);

function reloadstop(){

        clearInterval(intervalobj);

}

 

//시작 버튼 클릭 시 fdelay() 함수가 1초 간격으로 다시 실행되게 셋팅

function reloadstart(){

        intervalobj=window.setInterval('fdelay()',1000);

}

 

//$(window).load는 페이지의 리소스, 이미지 등 모두 로드된 후 실행이 된다.

//아래 함수를 통해 id guide를 가진 div에 "000초 후 새로 고침"이라는 글자가 셋팅 되고, setInterval()를 통해 fdelay()함수가 1초 간격으로 실행된다.

$(window).load(function(){

        var dom = $("#guide");

        var num = Math.floor(Math.random()*10)+100;

        dom.html(num + " 초 후 새로고침");

        intervalobj=window.setInterval('fdelay()',1000);

});

</script>

 

 

<div id="guide">none</div>

<input type="button" value="정지" onclick="reloadstop()">

<input type="button" value="시작" onclick="reloadstart()">