Cómo cancelar (interrumpir) correctamente una solicitud AJAX en jQuery

¡Hola a todos! Acabo de empezar a aprender AJAX y jQuery, y me encontré con un problema. Tengo varios botones en la página que, al hacer clic, envían solicitudes AJAX al servidor. A veces el usuario hace clic rápidamente en diferentes botones, y resulta que la solicitud anterior aún no ha terminado, pero ya se está enviando una nueva. Aquí está mi código simplificado: ```javascript $('.load-data').click(function() { var id = $(this).data('id'); $.ajax({ url: '/api/data/' + id, method: 'GET', success: function(response) { $('#content').html(response); }, error: function(xhr, status, error) { console.log('Error: ' + error); } }); }); ``` El problema es que si haces clic rápidamente en los botones 1, 2 y 3, en div#content puede mostrarse la respuesta de la solicitud al botón 1, y luego la del botón 2, es decir, los datos se mezclan. Quiero que, al hacer un nuevo clic, la solicitud anterior se cancele y solo la última respuesta se muestre en el contenedor. Probé usando