[자바스크립트] 타이머, 반복 타이머, 메인화면 반복 전환 효과

단발적 타이머 : window.setTimeout()

타이머 초기화 : window.clearTimeout()

반복적 타이머 : window.setInterval()

반복 타이머 초기화 : window.clearInterval()

요놈들은 window객체 내장함수이며, 시간 제한이나, 반복을 주고 싶을 때 사용합니다.

1. setTimeout()은 일정시간 이후에 한번 동작합니다.

예시)

<button onclick = "setTimeout(function(){alert('Hello')},3000)">Try it</button>

2. clearTimeout()은 setTimeout에서 지정한 시간을 초기화 할 때 사용합니다.

예시)

<button onclick="myVar=setTimeout(function() alert('Hello')},3000)">Try it</button>
<button onclick="clearTimeout(myVar)">Try it</button>

3. setInterval()은 일정 시간을 주기로 반복을 주고 싶을 경우 사용합니다.

예시)

<p id="demo"></p>

var myVar=setInterval(function () {myTimer()}, 1000);

function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}

4. clearInterval()은 setInterval로 지정된 반복을 초기화 할 때 사용합니다.

예시)

<p id="demo"></p>

<button onclick="clearInterval(myVar)">Stop time</button>

<script>
var myVar = setInterval(function () {myTimer()}, 1000);
function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>

참고사이트 : http://www.w3schools.com/js/js_timing.asp

개인적으로 주기적으로 항목의 크기가 변하는 화면을 구성해봤습니다. 화면전환효과?

요즘 여러 사이트의 메인에서 적용하고 있는 기법(?)이랄까요.

<script>

    $(window).load(function(){

        // 페이지 전환 자동 실행

        fn_SetInterval(0, "I");

    });

 

    var setIn;

    // 메인화면 아이템 자동 전환

    function fn_SetInterval(order, initSttus) {

        var flag = new Array("A", "B", "C");

        var i = order;

 

        // 항목 선택시 즉각적인 화면 출력을 위해 수행, "I"일경우 최초 로딩이므로 우선 첫 항목을 보여준 후 인터벌 수행

        if(initSttus!="I") {

            fn_ChangeLi(flag[parseInt(i%3)]);

            i++;

        }

        

        // Interval 화면 전환 수행

        setIn = setInterval(function() {

            fn_ChangeLi(flag[parseInt(i%3)]);            

            i++;

        }, 3000);

    }

    

    // Interval 초기화 후 Interval 재수행

    function fn_StopInterval(order) {

        clearInterval(setIn);    

        fn_SetInterval(order, "");

    }

    

    // 메인화면 아이템 전환 효과

    function fn_ChangeLi(flag) {

        if(flag=="A") {

            $("#Li_A").animate({ width:"700px" }, 700);

            $("#Li_B").animate({ width:"90px" }, 700);

            $("#Li_C").animate({ width:"90px" }, 700);

        } else if(flag=="B") {

            $("#Li_A").animate({ width:"90px" }, 700);

            $("#Li_B").animate({ width:"700px" }, 700);

            $("#Li_C").animate({ width:"90px" }, 700);

        } else {

            $("#Li_A").animate({ width:"90px" }, 700);

            $("#Li_B").animate({ width:"90px" }, 700);

            $("#Li_C").animate({ width:"700px" }, 700);

        }

    }

 </script>

/////////////////////////

 

    <!-- S:중단 -->

    <div class="mainMiddle" style="margin-top:100px;">

        <ul>

            <li class="left" id="Li_A">

                <a href="javascript:fn_StopInterval(0, '')" ><span class="title">보안성검토</span></a>

            </li>

            <li class="center" id="Li_B">

                <a href="javascript:fn_StopInterval(1, '')" ><span class="title">One-Stop<br/>서비스</span></a>

            </li>

            <li class="right" id="Li_C">

                <a href="javascript:fn_StopInterval(2, '')" ><span class="title">IT위험평가</span></a>

            </li>

        </ul>

    </div>

    <!-- E:중단 -->