Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.06.2012, 14:09
Новичок на форуме
Отправить личное сообщение для kat-khmara Посмотреть профиль Найти все сообщения от kat-khmara
 
Регистрация: 25.06.2012
Сообщений: 3

Проблема с 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);	
						});	
					});
					
			});
Ответить с цитированием
  #2 (permalink)  
Старый 25.06.2012, 15:16
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

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

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

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

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


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

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

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

Последний раз редактировалось Deff, 25.06.2012 в 15:23.
Ответить с цитированием
  #3 (permalink)  
Старый 25.06.2012, 15:33
Новичок на форуме
Отправить личное сообщение для kat-khmara Посмотреть профиль Найти все сообщения от kat-khmara
 
Регистрация: 25.06.2012
Сообщений: 3

Спасибо за идею, попробую упростить. Но проблема именно в том, что автопереключение срабатывает через 5 секунд и это время не обнуляется при клике на кнопку. В какой бы момент пользователь не нажал переключатель, setInterval все равно переключит слайд на 5-ой секунде. Я хотела сделать так, чтобы при клике на кнопку отсчет секунд начинался с нуля.
Ответить с цитированием
  #4 (permalink)  
Старый 25.06.2012, 16:28
Аватар для Dim@
Профессор
Отправить личное сообщение для Dim@ Посмотреть профиль Найти все сообщения от Dim@
 
Регистрация: 21.04.2012
Сообщений: 951

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")'>
Ответить с цитированием
  #5 (permalink)  
Старый 25.06.2012, 16:43
Новичок на форуме
Отправить личное сообщение для kat-khmara Посмотреть профиль Найти все сообщения от kat-khmara
 
Регистрация: 25.06.2012
Сообщений: 3

Спасибо! Я тоже пыталась использовать setTimeout при клике, но как-то у меня не получалось. Буду пробовать.
Ответить с цитированием
  #6 (permalink)  
Старый 25.06.2012, 16:52
Аватар для Dim@
Профессор
Отправить личное сообщение для Dim@ Посмотреть профиль Найти все сообщения от Dim@
 
Регистрация: 21.04.2012
Сообщений: 951

kat-khmara,
незачто специально сделаю разбор кода - суть в том что есть счетчик (в данном случае это document.i) увеличивающийся каждую секунду на единицу, кол-во проверок на секунду (в данном случае document.ok, естственно так как 100мс 10 в 1 секунде то и if (document.ok == 10) document.ok = 0, и проверка на значение счетчика (if (document.i == 4){setTimeout('al()', 1000)})
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема с обработкой ескольких .hover() anocean jQuery 3 15.06.2012 22:43
проблема с автообновлением setinterval luncharra Мобильный JavaScript 0 08.04.2011 12:13
setTimeout setInterval и др. mycoding Общие вопросы Javascript 6 28.10.2010 17:26
Проблема в document.write при использовании setInterval() GOll Общие вопросы Javascript 21 06.10.2008 17:38
clearInterval и setInterval из разных локаций. Bakuryu Events/DOM/Window 6 27.07.2008 22:45