javascript - sweet - Ajax, evita múltiples peticiones al hacer clic.

sweet alert bootstrap

Question

Estoy tratando de evitar múltiples solicitudes cuando el usuario hace clic en el botón de inicio de sesión o registro. Este es mi código, pero no funciona. Solo la primera vez funciona bien, luego devuelve falso ..

$(''#do-login'').click(function(e) {
e.preventDefault();
if ( $(this).data(''requestRunning'') ) {
return;
}
$(this).data(''requestRunning'', true);
$.ajax({
type: "POST",
url: "/php/auth/login.php",
data: $("#login-form").serialize(),
success: function(msg) {
//stuffs
},
complete: function() {
$(this).data(''requestRunning'', false);
}
});
});

¿Algunas ideas? ¡Gracias!

Answer 1

El problema está aquí:

 complete: function() {
$(this).data(''requestRunning'', false);
}

this ya no apunta al botón.

$(''#do-login'').click(function(e) {
var me = $(this);
e.preventDefault();
if ( me.data(''requestRunning'') ) {
return;
}
me.data(''requestRunning'', true);
$.ajax({
type: "POST",
url: "/php/auth/login.php",
data: $("#login-form").serialize(),
success: function(msg) {
//stuffs
},
complete: function() {
me.data(''requestRunning'', false);
}
});
});

Answer 2

En sus devoluciones de llamadas ajax el contexto ( this ) cambia desde la función externa, puede configurarlo para que sea el mismo usando la propiedad de contexto en $ .ajax

$.ajax({
type: "POST",
url: "/php/auth/login.php",
data: $("#login-form").serialize(),
context: this, //<-----
success: function(msg) {
//stuffs
},
complete: function() {
$(this).data(''requestRunning'', false);
}
});

Answer 3

Encontré el enfoque útil. Lo he implementado como una función de propósito general para jQuery con ES6.

export default function (button, promise) {
const $button = $(button);
const semaphore = ''requestRunning'';
if ($button.data(semaphore)) return null;
$button.data(semaphore, true);
return promise().always(() => {
$button.data(semaphore, false);
});
}

Como $.ajax() devuelve una promesa, simplemente se pasa la promesa y la función se encarga del resto.

En términos generales, aquí está el uso.

import preventDoubleClick from ''./preventdoubleclick'';
...
button.click(() => {
preventDoubleClick(this, () => $.ajax()
.done(() => { console.log("success") }));
});

Answer 4

O puede hacerlo por $(this).addClass("disabled"); a su botón o enlace y después de hacer clic, puede $(this).removeClass("disabled"); .

// CSS

.disabled{
cursor: not-allowed;
}

// JQUERY

$(''#do-login'').click(function(e) {
e.preventDefault();
$(this).addClass("disabled");
$.ajax({
type: "POST",
url: "/php/auth/login.php",
data: $("#login-form").serialize(),
context: this,
success: function(msg) {
//do more here
$(this).removeClass("disabled");
},
});
});

PS Si usa bootstrap css, no necesita la parte css.

Answer 5

Para evitar la solicitud de ajax múltiple en todo el sitio. Por ejemplo: si usa la solicitud de ajax en otra página de ajax, el uso de ajax en el bucle php, etc., le dará una solicitud de ajax múltiple con un resultado. Tengo solución:

Use window.onload = function() { ... }

en lugar de

$(document).ready(function(){ ... });

en la página principal index.php. Se evitará toda solicitud multi. :)

Answer 6

Puede deshabilitar el botón.

$(this).prop(''disabled'', true);

Answer 7

Use on() y off() , para eso están:

$(''#do-login'').on(''click'', login);
function login(e) {
e.preventDefault();
var that = $(this);
that.off(''click''); // remove handler
$.ajax({
type: "POST",
url: "/php/auth/login.php",
data: $("#login-form").serialize()
}).done(function(msg) {
// do stuff
}).always(function() {
that.on(''click'', login); // add handler back after ajax
});
});