معالجة الأحداث بكفاءة وتقليل معدلها
طبّق تقليل معدل الأحداث وتأخيرها للأحداث كثيرة التكرار مثل تغيير الحجم أو التمرير، لمنع الاستدعاءات المفرطة للدوال وتحسين سرعة الاستجابة.
معالجة الأحداث بكفاءة وتقليل معدلها درس مجاني في jQuery Academy على CoddyKit. هذا هو الدرس 2 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في jQuery Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة jQuery Academy 3 دروس في المجموع.
التحميل الزائد للأحداث: مشكلة في الأداء
عند بناء تطبيقات ويب تفاعلية، نعتمد غالبًا على أحداث مثل التمرير وتغيير الحجم والكتابة. وتؤدي هذه الأحداث إلى تشغيل دوال تحدّث واجهة المستخدم أو تنفّذ عمليات حسابية.
ومع ذلك، إذا تكررت هذه الأحداث كثيرًا، فقد تؤدي إلى اختناقات في الأداء، وتجربة مستخدم بطيئة، بل وحتى تعطل المتصفح. وهنا تصبح تقنيات التحسين ضرورية.
المشكلة: التكرار السريع للأحداث
لِنرَ عدد مرات تشغيل حدث اعتيادي مثل scroll من دون أي تحسين. افتح وحدة التحكم أو راقب العداد أثناء التمرير.
لاحظ مدى سرعة ازدياد العدد، ما يشير إلى إجراء العديد من استدعاءات الدوال خلال فترة قصيرة. وهذا قد يكون غير فعّال للغاية.
<!DOCTYPE html>
<html>
<head>
<title>Rapid Event Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
body { height: 200vh; font-family: sans-serif; margin: 0; }
#status { position: fixed; top: 10px; left: 10px; background: #ffe0b2; padding: 8px; border-radius: 4px; font-size: 14px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
p { margin-top: 50px; padding: 10px; }
</style>
</head>
<body>
<div id="status">Scroll Count: 0</div>
<p>Scroll down to see the event fire rapidly.</p>
<script>
$(document).ready(function() {
let count = 0;
$(window).on('scroll', function() {
count++;
$('#status').text('Scroll Count: ' + count);
});
});
</script>
</body>
</html>التعرّف إلى Throttling
Throttling هي تقنية تحدّ من عدد مرات استدعاء دالة خلال فترة زمنية. فهي تضمن تنفيذ الدالة مرة واحدة على الأكثر ضمن فترة زمنية محددة.
تخيّلها كبوابة لا تُفتح إلا كل 200 ميلي ثانية. ومهما حاولت المرور عبرها مرات عديدة، فلن تتمكن من العبور إلا عندما تكون البوابة مفتوحة.
تطبيق Throttling عمليًا
إليك أداة بسيطة لتطبيق Throttling. فهي تضمن تشغيل معالج التمرير مرة واحدة على الأكثر كل 200 ميلي ثانية. وهذا يقلل عدد الاستدعاءات بدرجة كبيرة أثناء التمرير المتواصل.
قارن هذا بالمثال السابق. يتحدّث العداد بسلاسة ولكن بوتيرة أقل، مما يوفر الموارد.
<!DOCTYPE html>
<html>
<head>
<title>Throttling Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
body { height: 200vh; font-family: sans-serif; margin: 0; }
#status { position: fixed; top: 10px; left: 10px; background: #c8e6c9; padding: 8px; border-radius: 4px; font-size: 14px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
p { margin-top: 50px; padding: 10px; }
</style>
</head>
<body>
<div id="status">Throttled Scroll Count: 0</div>
<p>Scroll down. The count updates less frequently.</p>
<script>
// A simple throttling utility function
function throttle(func, delay) {
let canRun = true;
return function(...args) {
if (canRun) {
func.apply(this, args);
canRun = false;
setTimeout(() => canRun = true, delay);
}
};
}
$(document).ready(function() {
let count = 0;
const throttledScroll = throttle(function() {
count++;
$('#status').text('Throttled Scroll Count: ' + count);
}, 200); // Update at most every 200ms
$(window).on('scroll', throttledScroll);
});
</script>
</body>
</html>التعرّف إلى Debouncing
Debouncing هي تقنية تؤخر تنفيذ دالة حتى مرور مدة زمنية معينة منذ آخر مرة تم فيها تشغيل الحدث.
تخيّل ضوءًا لا ينطفئ إلا بعد توقفك عن الحركة لمدة ثانية واحدة. فإذا واصلت الحركة، يُعاد ضبط المؤقت. ولا تُشغّل الدالة إلا بعد توقف المستخدم عن الإجراء للمدة المحددة.
تطبيق Debouncing عمليًا
نطبّق هنا Debouncing على حدث keyup لحقل إدخال نصي. ولا تتحدّث الحالة إلا بعد توقفك عن الكتابة لمدة 500 ميلي ثانية.
وهذا مناسب جدًا لمربعات البحث، إذ لا تريد تنفيذ استعلام البحث إلا بعد أن ينتهي المستخدم من كتابة عبارته.
<!DOCTYPE html>
<html>
<head>
<title>Debouncing Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
body { font-family: sans-serif; margin: 0; padding: 20px; }
input { padding: 8px; font-size: 16px; border: 1px solid #ccc; border-radius: 4px; width: 100%; max-width: 300px; }
#status { background: #bbdefb; padding: 8px; margin-top: 15px; border-radius: 4px; font-size: 14px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
</style>
</head>
<body>
<p>Type into the box. The status updates only after you pause.</p>
<input type="text" id="myInput" placeholder="Start typing...">
<div id="status">Last typed: (none)</div>
<script>
// A simple debouncing utility function
function debounce(func, delay) {
let timeoutId;
return function(...args) {
const context = this;
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
func.apply(context, args);
}, delay);
};
}
$(document).ready(function() {
const debouncedLog = debounce(function(event) {
$('#status').text('Last typed: ' + $(event.target).val());
}, 500); // Wait 500ms after typing stops
$('#myInput').on('keyup', debouncedLog);
});
</script>
</body>
</html>Throttling مقابل Debouncing: الفروقات الأساسية
على الرغم من أن كلتا التقنيتين تحسّنان التعامل مع الأحداث، فإن لكل منهما غرضًا مختلفًا:
- Throttling: يضمن تنفيذ الدالة بانتظام مع مرور الوقت، حتى إذا تكرر الحدث بسرعة. فهو يتعلق بالتحكم في المعدل.
- Debouncing: يضمن عدم تنفيذ الدالة إلا بعد مرور فترة من عدم النشاط. فهو يتعلق بالانتظار حتى ينهي المستخدم إجراءً ما.
يعتمد اختيار التقنية المناسبة على حالة الاستخدام الخاصة بك.
حالات استخدام عملية
إليك بعض السيناريوهات الشائعة لكل تقنية:
- Throttling:
- تغيير حجم النافذة
- التمرير في الصفحة
- حركات السحب والإفلات
- تحديثات الألعاب (مثل إطلاق سلاح) - Debouncing:
- الإدخال في شريط البحث (الإكمال التلقائي)
- التحقق من صحة النموذج بعد إدخال المستخدم
- حفظ المحتوى في محرر نصوص
- تشغيل استدعاء API بعد توقف المستخدم عن الكتابة
الدمج مع أحداث jQuery
يمكنك بسهولة دمج هذه الدوال المساعدة مع أساليب الأحداث في jQuery مثل .on() أو .bind(). ما عليك سوى تمرير دالتك المطبّق عليها Throttling أو Debouncing باعتبارها معالج الحدث.
$(window).on('resize', throttle(myResizeHandler, 250));
$('#search-input').on('keyup', debounce(searchFunction, 300));يساعد ذلك في الحفاظ على كفاءة مستمعي الأحداث واستجابة تطبيقك.
فوائد الأداء
بتطبيق Throttling وDebouncing، ستحصل على العديد من فوائد الأداء:
- تقليل استخدام وحدة المعالجة المركزية: يعني انخفاض عدد استدعاءات الدوال تقليل العمل الذي ينفذه المتصفح.
- واجهة مستخدم أكثر سلاسة: يمنع الرسوم المتحركة المتقطعة أو الواجهات غير المستجيبة.
- تجربة مستخدم أفضل: سيشعر المستخدمون بأن التطبيق أسرع وأكثر سلاسة.
- تحسين استدعاءات API: يمنع إغراق الخادم الخلفي بالطلبات غير الضرورية.
اختبار سريع حول تحسين الأحداث
أي من السيناريوهات التالية سيكون التعامل معه باستخدام Debouncing هو الأفضل؟
مراجعة وخطوات تالية
أحسنتم! لقد تعلّمتم تقنيتين فعّالتين لتحسين التعامل مع الأحداث:
- Throttling: يحدّ من معدل استدعاء الدالة.
- Debouncing: يؤخر تنفيذ الدالة حتى مرور فترة من عدم النشاط.
سيؤدي إتقان هاتين التقنيتين إلى تحسين أداء تطبيقات jQuery واستجابتها بدرجة كبيرة. جرّبوا فترات تأخير مختلفة للعثور على القيمة الأنسب لاحتياجاتكم الخاصة!
تعلم JavaScript مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 22
- الدروس
- 48
الأسئلة الشائعة
هل درس «معالجة الأحداث بكفاءة وتقليل معدلها» مجاني؟
نعم — نص درس «معالجة الأحداث بكفاءة وتقليل معدلها» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة jQuery Academy، انتقل إلى CoddyKit PRO. تتضمن دورة jQuery Academy 3 دروس في المجموع.
ماذا ستتعلم في «معالجة الأحداث بكفاءة وتقليل معدلها»؟
طبّق تقليل معدل الأحداث وتأخيرها للأحداث كثيرة التكرار مثل تغيير الحجم أو التمرير، لمنع الاستدعاءات المفرطة للدوال وتحسين سرعة الاستجابة. تتمرن على jQuery Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ jQuery Academy؟
لا تُشترط خبرة سابقة. jQuery Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 3.
كم من الوقت يستغرق درس «معالجة الأحداث بكفاءة وتقليل معدلها»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس jQuery Academy هذا؟
نعم. كل درس في jQuery Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- تحسين عمليات معالجة DOM
- معالجة الأحداث بكفاءة وتقليل معدلها
- الاستفادة من التخزين المؤقت والكائنات المؤجّلة