Ожидание окончания обработчика

[gogolinsky]

Имеем:
Слайдер картинок.
И соответственно две кнопки: крутануть влево, крутануть вправо.
Обработчики событий кнопок:

$(".right").click(function() {
								slideLeft();	
								});
	$(".left").click(function() {
								slideRight();	
								});

Слайдер работает красиво. Но
Возникает некрасивое явление, если несколько раз быстро нажать на кнопку вправо (или влево). Картинки начинают скакать не по порядку и только со временем все устаканивается.
Как исправить код обработчиков событий, что б перед последующим нажатием на кнопку Вперед (Назад) сначала проходила проверка "а закончилась ли предыдущая анимация"?

[Tek]

Я вижу 2 решения проблемы:
1) Заведите переменную (Скажем is_animated) которая будет меняться с true на false при старте анимации и её окончанию соответственно. код на клик будет выглядеть примерно так:

$(".right").click(function() {
					
      if(is_animated == false){
       slideLeft();
      }	
								});
	$(".left").click(function() {
	      if(is_animated == false){
       slideRight();
      }	
								});

2) Используйте метод stop(true,true), приводит анимацию к конечному значению.

[gogolinsky]

первый вариант пробовал - не работает.
Скрипт не обращает внимания на анимацию. Переменная принимает значение true еще до окончания всей анимации в функции.
Сейчас про Stop прочту, возможно оно

[Tek]

первый вариант пробовал - не работает.
Скрипт не обращает внимания на анимацию. Переменная принимает значение true еще до окончания всей анимации в функции.
Сейчас про Stop прочту, возможно оно

Вариант, работает просто вы что то не так делаете http://codepen.io/anon/pen/pLutv

[gogolinsky]

Все правильно. Первый вариант на самом деле работает.

var c=0;
function slideLeft() {
	if (c==0) {
		c=1;
		var aniSpeed = 800;
		$(".lastLast").addClass("noVisible").removeClass("lastLast");
		$(".last").animate({"left": "-1950px"},aniSpeed).addClass("lastLast").removeClass("last");			//Скрываем last
		$(".current").animate({"left": "-900px"},aniSpeed).addClass("last").removeClass("current");			//Сдвигаем current. Делаем его last
		$(".next").animate({"left": "150px"},aniSpeed).addClass("current").removeClass("next"); 				//Сдвигаем next, делаем его current
		$(".nextNext").animate({"left":"1200px"},aniSpeed,function(){c=0}).addClass("next").removeClass("nextNext"); 		//Сдвигаем класс nextNext. Делаем его next
		$(".next").eq(0).next(".psItem").removeClass("noVisible").addClass("nextNext").animate({"left":"2250px"},1); //Определяем элемент nextNext
			if(!($(".nextNext").length>0)) {
			$(".psItem").eq(0).addClass("nextNext").removeClass("noVisible").animate({"left": "2250px"},aniSpeed);
			}
	}
}

Дело было в том, что я переменную с обнулял в конце своей функции, а надо было в callback animate.