Лучшие практики для обработки событий, которые могут происходить только синхронно, но другие вещи все еще могут происходить самостоятельно в асинхронном режиме

Question

Я использую jQuery, и для таких вещей, как установка переключателей, я пишу много кода, например:

foo.toggleSetting = function() {
  var el = $(this);
  if(el.data('clicked')) return false; //need to back off if we're already doing something
  el.data('clicked',true);

  var visible = $(this).is(':visible');
  $.ajax({
     url: '/update_setting',
     data: {'status': visible},
     success: function() { el.data('clicked',false); }
  });
}

$(function(){
   $('#setting_toggle').click(foo.toggleSetting);
});

То, что я пытаюсь предотвратить, это то, что кто-то спамит одним переключателем настроек и отправляет тонну запросов на сервер, но это просто кажется неуклюжим. Я знаю, что мог бы установить запрос ajax в синхронный режим, но это блокирует все приложение от выполнения чего-либо, что также не является моим намерением (то есть вы могли бы играть с другими переключателями, и это было бы просто прекрасно).

Как другие люди справляются с такой ситуацией? '

Answer 1

Один из способов - использовать .one() и при успешном обратном вызове повторно связать событие.

foo.toggleSetting = function() {
  var el = $(this);

  var visible = $(this).is(':visible');
  $.ajax({
     url: '/update_setting',
     data: {'status': visible},
     success: function() { el.one('click', foo.toggleSetting); }
  });
}

$(function(){
   $('#setting_toggle').one('click', foo.toggleSetting);
});