이전 목록 다음
채택완료

setInterval 값 초기화

가방
프로필 보기이 회원 글보기이 회원의 댓글보기
 2019-03-26 (화) 15:42:45 5,708
Copy 
<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할때 

Copy 
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개 / 댓글 2개

채택된 답변
+20 포인트
동하아빠
프로필 보기이 회원 글보기이 회원의 댓글보기
 2019-03-26 (화) 17:04:00

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

Copy 
(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();
})();

답변에 대한 댓글 2개

가방
프로필 보기이 회원 글보기이 회원의 댓글보기
 2019-03-26 (화) 17:14:07
감사합니다 동하아빠님, 친절하고 자세한 답변덕분에 잘해결되었습니다 (_ _)
동하아빠
프로필 보기이 회원 글보기이 회원의 댓글보기
 2019-03-26 (화) 17:35:48
넵 ^^ 중간에 console.log 는 빼시면됩니다.

답변을 작성하려면 로그인이 필요합니다.