Предотвращение дублирования событий ajax в jquery

Question

Каков хороший способ блокировки до завершения предыдущего события ajax?

Я следовал Как сделать кнопку голосования с понижением, как в Stackoverflow? но если я нажму кнопку достаточно быстро, она отправит на сервер несколько (и, возможно, противоречивых) событий. Как сделать так, чтобы пользователь заставил подождать, пока еще один клик не будет зарегистрирован?

Редактировать: я также не хочу, чтобы он блокировался глобально - только для этой кнопки / элемента. Нужно ли мне поддерживать хэш?

Answer 1

Ну, так как я написал это, я думаю, я мог бы также ответить на это;)

«Обычный» способ сделать это - иметь переменную-индикатор, в которой выполняется запрос, и соответственно обновлять его до / после того, как все произойдет. Для моего кода в этом вопросе вы должны отредактировать его следующим образом:

Вне функции щелчка добавьте следующее:

var voting = false; // not initially voting

Внутри функции клика, в самом верху, добавьте:

if(voting) return false; // if voting, return
voting = true; // if not, set voting to true

Внутри обоих пост-обратных вызовов добавьте:

voting = false; // done voting, set back to false

Если вы хотите поддерживать показатель по каждому вопросу / ответу / пункту, вы можете сделать это:

Сначала замените этот код:

var id = $(this).parents('div.answer').attr('id').split('_')[1];

С этим:

var parent = $(this).parents('div.answer'); // get the parent div
if(parent.data('voting')) return false; // if voting, return
parent.data('voting', true); // if not, update the marker
var id = parent.attr('id').split('_')[1]; // get the id

Затем внутри обоих пост-обратных вызовов добавьте:

parent.data('voting', false); // done voting, set back to false

В этом случае мы будем использовать данные jQuery для хранения статуса голосования по конкретному вопросу / ответу / элементу внутри содержащего DIV и обновления его соответствующим образом, когда что-то происходит.

Надеюсь, это поможет.

Answer 2

Привязать событие один раз, используя jQuery.fn.one , затем снова связать его в функции обратного вызова

myFunc = function() {
   $.post(url, data, function(data){
      $('#button').one('click', myFunc)
   }
};

$('#button').one('click', myFunc);

Answer 3

используйте события начала и конца AJAX, чтобы установить глобальную переменную занятости, пока запрос не будет завершен. Покажите сообщение о том, что выполняется действие, чтобы сообщить пользователю.

Jquery имеет множество функций, которые помогут вам, если это подходит вашему приложению:

http://docs.jquery.com/Ajax