Здравствуйте!
Заранее извините за нубский вопрос, я честно пытаюсь вникнуть в promise, JqueryDeffered, но все время попадаются примеры, которые трудно применить к моей простейшей ситуации. Мне нужно просто направление к RTFM.
Есть кнопка и скрытый див с сообщением об ошибке.
<button class="send">Click</button>
<div class="error"></div>
По клику кнопки AJAX-запрос, который возвращает успех/неудачу (в примере на
jsfiddle сделано, чтобы возвращало всегда ошибку). В соответствии с этим, показывается поле с ошибкой.
$('.send').on('click', function() {
hideError();
getGrabberInfo();
});
var getGrabberInfo = function() {
$.ajax({
url: "/echo/json/",
type: "POST",
data: {1:1},
beforeSend : function() {
console.log('beforeSend');
},
success: function(data) {
showError(); // показать ошибку
}
});
};
Для показа\скрытия ошибки используется animate.css.
Проблема в том, что при клике нужно плавно скрывать ошибку (если она есть), затем вызывать функцию с аяксом. Понятно, что асинхронность делает свое черное дело — ошибка скрывается, запрос происходит, но повторно функция для показа ошибки не вызывается (функция скрытия уже отработала). Если переписать все без использования эффектов, мгновенно, все нормально.
Два вопроса:
1. Как добиться скрытия ошибки, затем аякс-запроса, затем показа ошибки последовательно?
2. Если быстро-быстро кликать, поле ошибки будет колбасить. Думаю, справиться с этим, введя блокирующую переменную. Куда ее лучше вставить и проверять?
Мне нужно понять именно на таком простом примере. Спасибо за любую помощь!
Полный код:
https://jsfiddle.net/1w9moseu/ 
