setInterval 값 초기화
본문
<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부터시작)되도록할러면 어떻게 해야하나요;
!-->!-->답변 1
아래처럼 하심 될듯합니다.
(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();
})();
답변을 작성하시기 전에 로그인 해주세요.