Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Click с задержкой по таймеру (https://javascript.ru/forum/dom-window/75745-click-s-zaderzhkojj-po-tajjmeru.html)

oleg13321 02.11.2018 12:48

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

Nexus 02.11.2018 12:55

https://api.jquery.com/stop/


Часовой пояс GMT +3, время: 18:14.