How to correctly cancel (abort) an AJAX request in jQuery?

Hello everyone! I've just started learning AJAX and jQuery, and I've run into a problem. I have several buttons on my page that send AJAX requests to the server when clicked. Sometimes the user clicks different buttons quickly, and it turns out that the old request hasn't finished yet, but a new one is already being sent. Here's my simplified code: ```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); } }); }); ``` The problem is that if you quickly click buttons 1, 2, and 3, the div#content may display