شرح صفوف ومحتوى الفقرة
تُطلق حقول البحث الفوري حدث التغيير مع كل حرف يكتبه المستخدم. يتيح دمج مؤقت انتظار قصير عبر setTimeout() (مثل 250ms) مع AbortController داخل دالة تنظيف واحدة تجربة بحث فائقة السلاسة دون إغراق الخادم بطلبات غير مكتملة:
- إذا كتب المستخدم حرفاً تالياً قبل مرور
250ms، تلغيclearTimeout(timerId)الطلب المجدول قبل انطلاقه أصلاً. - وإذا كان هناك طلب سابق قد انطلق بالفعل، تتكفل
controller.abort()بإلغائه فوراً.
HTML
useEffect(() => {
const ctrl = new AbortController();
const id = setTimeout(() => {
const opts = { signal: ctrl.signal };
fetch(`/api/courses?q=${q}`, opts)
.then((r) => r.json())
.then(setResults)
.catch(() => {});
}, 250);
return () => { clearTimeout(id); ctrl.abort(); };
}, [q]);