Como cancelar (interromper) corretamente uma requisição AJAX no jQuery?

Olá a todos! Comecei a estudar AJAX e jQuery recentemente e me deparei com um problema. Na minha página, há vários botões que, ao serem clicados, enviam requisições AJAX para o servidor. Às vezes, o usuário clica rapidamente em botões diferentes, e acontece que a requisição antiga ainda não foi concluída, enquanto uma nova já está sendo enviada. Aqui está meu 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('Erro: ' + error); } }); }); ``` O problema é que, se clicar rapidamente nos botões 1, 2 e 3, o div#content pode exibir a resposta da requisição do botão 1 e depois a do botão 2 — ou seja, os dados se misturam. Eu quero que, ao clicar novamente, a requisição antiga seja cancelada e apenas a última resposta seja inserida no container. Tentei corrigir