Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Проблема с setInterval и clearInterval (https://javascript.ru/forum/events/29363-problema-s-setinterval-i-clearinterval.html)

kat-khmara 25.06.2012 14:09

Проблема с 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);	
						});	
					});
					
			});

Deff 25.06.2012 15:16

kat-khmara,
Если перезапуск с удалением - смысла ставить setInterval нет

и данные функции работают нормально и без проблем через анонимную функцию, либо через текстовую переменную

либо
setInterval("SliderAuto()",5000);

либо
setInterval(function(){SliderAuto()},5000);


Потом - самое простое для автопереключения просто делать клик по кнопе

setInterval(function(){$('.slider_switch ul li.right).click()},5000);

тады сильных конструкций для автопрокрутки мон не делать, (ток флаг ставим - ручная или авто, дабы выходить из авто при кликом мышью

kat-khmara 25.06.2012 15:33

Спасибо за идею, попробую упростить. Но проблема именно в том, что автопереключение срабатывает через 5 секунд и это время не обнуляется при клике на кнопку. В какой бы момент пользователь не нажал переключатель, setInterval все равно переключит слайд на 5-ой секунде. Я хотела сделать так, чтобы при клике на кнопку отсчет секунд начинался с нуля.

Dim@ 25.06.2012 16:28

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")'>

kat-khmara 25.06.2012 16:43

Спасибо! Я тоже пыталась использовать setTimeout при клике, но как-то у меня не получалось. Буду пробовать.

Dim@ 25.06.2012 16:52

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, время: 17:30.