Проблема с setInterval и clearInterval
Добрый день! Делаю слайдер с переключателями по слайдам и автопереключением. Отдельно они работают нормально, но вместе плохо дружат. Автопереключение при помощи setInterval по 5 сек. Но если юзер кликнет на переключатель через 4 сек, то на 5-ой сек слайдер снова сменяется. Пробовала на клике остановить setInterval через clearInterval и запустить его снова, но это не исправило ситуацию. Сделала массив айдишек setInterval'а и при клике останавливаю i-тый, запускаю i+1-вый. Подскажите, пожалуйста, уровень невежества при данном подходе. Возможно, существует стандартное решение, а я изобретаю велосипед?
$(function(){
function MainSlider(p){
$('.slider_switch ul li').removeClass('active');
$('.slider_switch ul li').eq(p).addClass('active');
$('.slider_photo .slider_photo_item').fadeOut(0);
$('.slider_photo .slider_photo_item').eq(p).fadeIn(800);
$('.slider_right_items .slider_right_item').fadeOut(0);
$('.slider_right_items .slider_right_item').eq(p).fadeIn(10);
}
function SliderAuto (){
var c;
var c2;
var b = $('.slider_switch ul li').size();
for(i=0;i<b-1;i++) {
if($('.slider_switch ul li').eq(i).hasClass('active')) {
c = i;
c2 = c+1;
}
}
if ($('.slider_switch ul li').eq(b-1).hasClass('active')) {
c = b-1;
c2 = 0;
}
MainSlider(c2);
}
$(document).ready(function(){
$('.slider_photo').css('height', '330px').css('overflow','hidden');
var i;
i=0;
var SliderInterval = new Array;
SliderInterval[i] = setInterval(SliderAuto,5000);
$('.slider_switch ul li').click(function(){
var n = $(this).index();
MainSlider(n);
clearInterval(SliderInterval[i]);
i=i+1;
SliderInterval[i] = setInterval(SliderAuto,5000);
});
});
});
|
kat-khmara,
Если перезапуск с удалением - смысла ставить setInterval нет и данные функции работают нормально и без проблем через анонимную функцию, либо через текстовую переменную либо
setInterval("SliderAuto()",5000);
либо
setInterval(function(){SliderAuto()},5000);
Потом - самое простое для автопереключения просто делать клик по кнопе setInterval(function(){$('.slider_switch ul li.right).click()},5000); тады сильных конструкций для автопрокрутки мон не делать, (ток флаг ставим - ручная или авто, дабы выходить из авто при кликом мышью |
Спасибо за идею, попробую упростить. Но проблема именно в том, что автопереключение срабатывает через 5 секунд и это время не обнуляется при клике на кнопку. В какой бы момент пользователь не нажал переключатель, setInterval все равно переключит слайд на 5-ой секунде. Я хотела сделать так, чтобы при клике на кнопку отсчет секунд начинался с нуля.
|
kat-khmara,
у вас проблема что слайдер по истечении 5 секунд переходит на новый, но и пользователь тоже может кликнуть и переключить:) ? я тоже сталкивался с данной проблемой а она решается так:
<script>
document.ok = 1;
function alPr(){
if (document.ok == 10) document.ok = 0;
if (document.ok != 1){document.ok++; return}
if (document.i == 4){setTimeout('al()', 1000)}
document.ok++;
}
function al(prov){
s = document.createElement('span');
s.innerHTML = 'LOL<br>';
document.getElementById('div').appendChild(s);
document.i = 0;
}
document.i = 0;
function text(){
if (document.i == 5) document.i = 0;
document.getElementById('text').innerHTML = document.i;
document.i++;
}
setInterval('text()', 1000);
setInterval('alPr()', 100);
</script>
<span id='text'></span>
<script>
text();
</script>
<div id='div'></div>
<input type='button' value='Кнопка' onclick='al("but")'>
|
Спасибо! Я тоже пыталась использовать setTimeout при клике, но как-то у меня не получалось. Буду пробовать.
|
kat-khmara,
незачто специально сделаю разбор кода - суть в том что есть счетчик (в данном случае это document.i) увеличивающийся каждую секунду на единицу, кол-во проверок на секунду (в данном случае document.ok, естственно так как 100мс 10 в 1 секунде то и if (document.ok == 10) document.ok = 0;), и проверка на значение счетчика (if (document.i == 4){setTimeout('al()', 1000)}) |
| Часовой пояс GMT +3, время: 09:47. |