Hay un botón y cuando el usuario hace clic en el botón, algunos datos se guardan en el back-end. El problema es cuando el usuario hace clic en el botón muy rápidamente, el controlador de eventos se ejecuta varias veces.

Este es el codigo

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

Quiero que este controlador se ejecute cuando el usuario haga clic en el botón una sola vez. Incluso en caso de doble clic o triple clic, esto debería ejecutarse solo una vez. Solo quiero evitar clics rápidos, este controlador puede ejecutarse nuevamente, por supuesto

Tengo múltiples soluciones en mi mente como

Definir una variable global comoIS_BUTTON_HANDLER_WORKING = false y cuando ingrese el controlador, configúrelo en verdadero y al final, configúrelo en falso nuevamente. Y compruebe si es cierto, simplemente vuelva de la función.

Desconecte el controlador al principio y vuelva a unirlo al final.

Considera que tienes 25 botones en tu aplicación. ¿Cuál debería ser el mejor enfoque para implementar esto?

Mira estoViolín

Solución

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

Al usar esto, estamos seguros de que nuestro próximo controlador se ejecutará solo cuando la ejecución anterior se haya realizado completamente.