Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.11.2018, 12:48
Интересующийся
Отправить личное сообщение для oleg13321 Посмотреть профиль Найти все сообщения от oleg13321
 
Регистрация: 14.05.2018
Сообщений: 24

Click с задержкой по таймеру
Здравствуйте.
Я тут решил написать велосипед.
Слайдер. И понял, что есть один у меня косяк.
Если нажать "Следующий слайд (NEXT)", до того как закончится анимация, то к стоящему на тот момент параметру css.('left') отправится новая порция прибавки координат.
В итоге у меня слайдер прокручивается на половину слайда (или где был слайд в момент повторного клика).

Я хотел попытаться сделать недоступной функцию $('dots').click таймером. Пытался придумать с setTimeout, но видимо идея была не очень.

Собственно мое изваяние:
$(document).ready(function(){
	var dots = true;
	var timer = true;
	var obj = $('#position_slider');
	var slide_width = obj.innerWidth();
	obj.css({'height':slide_width});
	var slide_length = obj	.find('li').length;
	console.log(slide_length);
	function start_timer(){
		setTimeout(timeout_click, 1350);
		console.log(setTimeout(timeout_click, 1350));
	}
	function timeout_click() {
			  timer = true;
			}
	if (slide_length > 1){
		obj.find('li').each(function(i,elem){
			var position_slide = slide_width * i;
			$(this).css({'left':position_slide});
			$(this).css({'transition':'left 1s ease 0.3s'});
		});
		if(dots){
			obj.after('<span class="dot next">></span>');
			obj.after('<span class="dot prev"><</span>');
		}
	}
	if (dots){
		var count_next = 1;
		var count_prev = 1;
		if (timer){
			$('.dot').click(function(){
					if (count_next >= slide_length){
						obj.find('li').each(function(j,elem){
							var re_position_slide = slide_width * j;
							$(this).css({'left':re_position_slide});
							count_prev--;
							count_next--;
							console.log(count_prev);
						});
					}
					else if(count_prev <= slide_length){
						if ($(this).hasClass('next')){
							console.log('click next');
							var anime_step = '-=' + slide_width;
							obj.find('li').animate({'left': anime_step}, "slow");
							count_next++;
							count_prev--;
							console.log(count_next);

						}
						if ($(this).hasClass('prev')  && count_prev > 1){
							console.log('click prev');
							console.log('click next');
							var anime_step = '+=' + slide_width;
							obj.find('li').animate({'left': anime_step}, "slow");
							count_next--;
							count_prev++;
							console.log(count_next);
						}
					}
					start_timer();
				timer = false;
			});
		}
	}
});



То место где я это пытаюсь развернуть.
http://bitco-in.ru/dushevaya-shtorka-erlit-10109v
Ответить с цитированием
  #2 (permalink)  
Старый 02.11.2018, 12:55
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,705

https://api.jquery.com/stop/
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как по событию click function запустить lightbox функцию? cheizer jQuery 0 05.01.2018 00:09
Обход многомерного массива с задержкой после каждого цикла Walk Общие вопросы Javascript 2 14.08.2017 16:17
draggable (запрет click для родителей компонента) khusamov ExtJS 5 13.04.2015 11:45
Обработчик click вызывается несколько раз или не всегда вызывается OlegJquery jQuery 2 21.07.2011 20:37
live click выполняется несколько раз hara jQuery 9 09.06.2010 10:58