كيفية إلغاء (قطع) طلب AJAX بشكل صحيح في jQuery؟

مرحبًا بالجميع! لقد بدأت للتو في تعلم AJAX و jQuery، وواجهت مشكلة. لدي عدة أزرار في الصفحة، عند النقر عليها يتم إرسال طلبات AJAX إلى الخادم. أحيانًا ينقر المستخدم بسرعة على أزرار مختلفة، فيحدث أن الطلب القديم لم يكتمل بعد، بينما يتم إرسال طلب جديد. إليك الكود المبسط الخاص بي: ```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); } }); }); ``` المشكلة هي أنه إذا تم الضغط بسرعة على الأزرار 1 و 2 و 3، فقد يظهر في div#content رد من الطلب إلى الزر 1، ثم من الزر 2 — أي أن البيانات تختلط. أريد أنه عند النقر الجديد، يتم إلغاء الطلب القديم، ويصل الرد الأخير فقط إلى الحاوية. حاولت استخدا