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

Это код

var x = 1;
$('#button').click(function() {
  // Do something
  // Save some data on network
  x++;
  console.log(x);
});

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

У меня есть несколько решений в моей голове, как

Определите глобальную переменную какIS_BUTTON_HANDLER_WORKING = false и когда вы вводите обработчик, установите его в true и в конце установите снова в false. И проверьте, правда ли это, просто вернитесь из функции.

Отсоедините обработчик в начале и снова присоедините в конце.

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

Взгляните на этоскрипка

Решение

$('#button').click(function() {
   $(this).attr('disabled', true);
  // Do something
  // Save some data on network
  $(this).removeAttr('disabled');
});

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