그누보드 QA - setInterval 값 초기화

setInterval 값 초기화

가방 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2019.03.26 15:42:45 조회 4825 (114.♡.♡.207)

본문


<div class="l_tabContainer">
      <ul class="tabHead ">
                  <li id="now1" class="cur active hte-font-on" onclick="chg_back('1');" data-target="#carousel-slide-banner" data-slide-to="0">
                        <a href="#"><span></span></a>
                   </li>

                  <li id="now2" class="cur hte-font-on"  onclick="chg_back('2');" data-target="#carousel-slide-banner" data-slide-to="1">
                     <a href="#"><span></span></a>
                 </li>

                <li id="now3" class="cur hte-font-on" onclick="chg_back('3');" data-target="#carousel-slide-banner" data-slide-to="2">
                     <a href="#"><span></span></a>
               </li>

               <li id="now4" class="cur hte-font-on" onclick="chg_back('4');" data-target="#carousel-slide-banner" data-slide-to="3">
               <a href="#"><span>....</span></a>
         </li>
     </ul>
 </div>
                                .....
 
//자동으로 돌아가는 배너
            setInterval(function() {
                    var now_num=$("#now").val();
                        now_num1=parseInt(now_num)+1;
                    if(now_num1>6){now_num1=1;}
                    $( "#now"+now_num1).trigger( "click" );
                }, 5000);

chg_back함수는 해당 li 클릭시 li에 Class를 지정하는 함수입니다.

setInterval이 5000(아마 5초?)로 줬습니다. 돌아가는건 좋은데 문제점이

now2클릭하고 2~3초 보다가 다른 now를 클릭하면 5초에 본 시간(2~3초)를 제외하고 보여준다음 자동으로 넘어가는 현상이있네요...

해당 now를 click할때


             var interval = setInterval(function() {
                    var now_num=$("#now").val();
                        now_num1=parseInt(now_num)+1;
                    if(now_num1>6){now_num1=1;}
                    $( "#now1"+now_num1).trigger( "click" );
                }, 5000);
 
                $("#now1").bind('click', function(e) {
                    clearInterval(interval);
                    setInterval(function() {
                    var now_num=$("#now").val();
                        now_num1=parseInt(now_num)+1;
                    if(now_num1>8){now_num1=1;}
                    $("#t"+now_num1).trigger( "click" );
                }, 5000);
                });

이런식으로 해봤는데도 잘안돼네요...

li를 클릭할때 interval이 초기화 (0부터시작)되도록할러면 어떻게 해야하나요;

#javascript

답변 1

동하아빠 홈페이지 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2019-03-26 17:04:00 119.♡.♡.99

아래처럼 하심 될듯합니다.


(function () {
    // 타임인터벌 객체 저장용 변수
    var ti;
 
    // 타임인터벌 시작 함수
    function startTimeInterval() {
        return setInterval(function() {
            var now_num=$("#now").val();
            now_num1=parseInt(now_num)+1;
            if(now_num1>6){now_num1=1;}
            console.log('timer expired');
            $( "#now"+now_num1).trigger( "click" );
        }, 5000);
    }
    // LI 클릭했을때, 타이머 재시작
    $('.l_tabContainer > ul > li').click(function () {
        clearInterval(ti);
        ti = startTimeInterval();
    });
    // 타이머 시작
    ti = startTimeInterval();
})();