Нужно останавливать счётчик и запускать заново. Уже по разному пробывал - никак. Вот создал простой скрипт для освоения этой темы:
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>Interval</title>
<style type="text/css">
span{
display: inline-block;
width: 20px;
text-align: center;
}
.spanAvtive {
border: 3px red solid;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
function fTimerStart(eDiv, iIndexActive){
eSpanSum = eDiv.querySelectorAll('span');
var fSliderTimer = setInterval(function(){
eSpanSum[iIndexActive].classList.remove('spanAvtive');
if(iIndexActive == 9){
iIndexActive = 0;
}else{
iIndexActive++;
};
eSpanSum[iIndexActive].classList.add('spanAvtive');
}, 2000);
$('.eButtonNext').click(function(){
clearInterval(fSliderTimer);
eSpanSum[iIndexActive].classList.remove('spanAvtive');
if(iIndexActive == 9){
iIndexActive = 0;
}else{
iIndexActive++;
};
eSpanSum[iIndexActive].classList.add('spanAvtive');
fTimerStart(eDiv, iIndexActive);
});
};
window.onload = function(){
var iIndexActive = 0;
var eDiv = document.querySelectorAll('.b-container')[0];
for(i=0;i<10;i++){
var eSpan = document.createElement('span');
if(i==0){
eSpan.classList.add('spanAvtive');
};
var eTextNode = document.createTextNode(i);
eDiv.appendChild(eSpan);
eSpan.appendChild(eTextNode);
};
fTimerStart(eDiv, iIndexActive);
};
</script>
</head>
<body>
<div class="b-container"></div>
<div>
<input type="button" value="next" class="eButtonNext" />
</div>
</body>
</html>
При втором (или более) событии click идёт сбой - запускаются несколько интервалов. Как решить эту проблему?