دوال الاستدعاء الخلفي (Callbacks) في JavaScript: دليل شامل للمبتدئين والمحترفين

إذا كنت ملمًا بأساسيات البرمجة، فمن المؤكد أنك تعرف جيدًا ماهية الدوال وكيفية استخدامها. ولكن ماذا عن دوال الاستدعاء الخلفي (Callback Functions)؟ تُعد هذه الدوال جزءًا حيويًا من لغة JavaScript، وفهمك لآلية عملها سيُعزز من مهاراتك بشكل كبير في تطوير الويب. في هذا المقال، سنسعى لمساعدتك على استيعاب مفهوم دوال الاستدعاء الخلفي وكيفية توظيفها بفعالية في مشاريعك، وذلك من خلال استعراض أمثلة عملية ومبسطة.

ما هي دالة الاستدعاء الخلفي (Callback Function)؟

في لغة JavaScript، تُعامل الدوال ككائنات (objects). وبما أننا نستطيع تمرير الكائنات كمعاملات (parameters) إلى دوال أخرى، فمن المنطقي أن نتمكن أيضًا من تمرير الدوال نفسها كمعاملات لدوال أخرى واستدعائها داخل هذه الدوال الخارجية. قد يبدو هذا المفهوم معقدًا للوهلة الأولى، لذا دعنا نوضحه بمثال عملي:

 function print ( callback ) {
  callback();
}

في هذا المثال، تستقبل الدالة print() دالة أخرى كمعامل وتستدعيها داخليًا. هذا السلوك مقبول تمامًا في JavaScript، ونطلق على الدالة التي تم تمريرها اسم “دالة الاستدعاء الخلفي” (callback). ببساطة، أي دالة تُمرر كمعامل لدالة أخرى لتُنفذ لاحقًا، هي دالة استدعاء خلفي.

لماذا نحتاج إلى دوال الاستدعاء الخلفي؟

تُنفذ JavaScript التعليمات البرمجية عادةً بشكل تسلسلي من الأعلى إلى الأسفل. ومع ذلك، هناك سيناريوهات معينة تتطلب تنفيذ جزء من الكود *بعد* اكتمال مهمة أخرى، وليس بالضرورة بشكل تسلسلي. يُعرف هذا النمط من البرمجة بالبرمجة غير المتزامنة (Asynchronous Programming). تضمن دوال الاستدعاء الخلفي أن دالة معينة لن تُنفذ قبل اكتمال مهمة محددة، بل ستُنفذ فور انتهائها. هذا يساعدنا على بناء تطبيقات JavaScript غير متزامنة قوية ومرنة، ويحمينا من المشاكل والأخطاء المحتملة التي قد تنجم عن محاولة الوصول إلى بيانات غير جاهزة بعد. في JavaScript، تتمثل الطريقة الأساسية لإنشاء دالة استدعاء خلفي في تمريرها كمعامل لدالة أخرى، ثم استدعائها فور حدوث حدث معين أو اكتمال مهمة ما. دعنا نرى كيف يمكننا تحقيق ذلك.

كيفية إنشاء دالة استدعاء خلفي (Callback)

لفهم ما تم شرحه أعلاه بشكل أوضح، لنبدأ بمثال بسيط. نريد طباعة رسالة إلى وحدة التحكم (console)، ولكن يجب أن تظهر هذه الرسالة بعد مرور 3 ثوانٍ:

 const message = function ( ) {
  console.log( "This message is shown after 3 seconds" );
}
setTimeout(message, 3000 );

يوجد في JavaScript دالة مدمجة تُسمى setTimeout()، والتي تقوم باستدعاء دالة أو تقييم تعبير بعد فترة زمنية محددة (بالمللي ثانية). في هذا المثال، تُستدعى الدالة message بعد مرور 3 ثوانٍ (حيث أن 1 ثانية = 1000 مللي ثانية). بعبارة أخرى، تُنفذ الدالة message بعد حدوث شيء ما (مرور 3 ثوانٍ في هذه الحالة)، وليس قبل ذلك. وبالتالي، تُعد الدالة message هنا مثالًا كلاسيكيًا لدالة استدعاء خلفي.

الدوال المجهولة (Anonymous Functions) كدوال استدعاء خلفي

بدلاً من تعريف الدالة بشكل منفصل ثم تمريرها، يمكننا تعريف الدالة مباشرة داخل الدالة الأخرى التي تستدعيها. سيبدو الكود كالتالي:

 setTimeout( function ( ) {
  console.log( "This message is shown after 3 seconds" );
}, 3000 );

كما نلاحظ، دالة الاستدعاء الخلفي هنا لا تحمل اسمًا. تعريف الدالة بدون اسم في JavaScript يُطلق عليه “دالة مجهولة” (anonymous function). هذا الأسلوب يؤدي نفس المهمة تمامًا كما في المثال السابق، ولكنه يوفر طريقة أكثر إيجازًا لكتابة الكود.

دوال الأسهم (Arrow Functions) كدوال استدعاء خلفي

إذا كنت تفضل أساليب JavaScript الحديثة، يمكنك كتابة نفس دالة الاستدعاء الخلفي باستخدام صيغة دوال الأسهم (Arrow Functions) التي قُدمت في معيار ES6، وهي طريقة أكثر اختصارًا ووضوحًا لتعريف الدوال:

 setTimeout( () => {
  console.log( "This message is shown after 3 seconds" );
}, 3000 );

دوال الاستدعاء الخلفي والأحداث (Events)

تُعد JavaScript لغة برمجة موجهة بالأحداث (event-driven). ولهذا السبب، تُستخدم دوال الاستدعاء الخلفي بشكل مكثف في التعامل مع الأحداث. على سبيل المثال، لنفترض أننا نريد الاستجابة لنقرة المستخدم على زر معين:

 <button id="callback-btn">Click here</button>

في هذه الحالة، ستظهر رسالة في وحدة التحكم فقط عندما ينقر المستخدم على الزر:

 document.querySelector("#callback-btn")
  .addEventListener("click", function ( ) {
    console.log( "User has clicked on the button!" );
  });

هنا، نقوم أولاً باختيار الزر باستخدام معرفه (id)، ثم نضيف إليه مستمع حدث (event listener) باستخدام الدالة addEventListener(). تستقبل هذه الدالة معاملين: الأول هو نوع الحدث، وهو “click” في هذه الحالة، والمعامل الثاني هو دالة استدعاء خلفي تُنفذ عند النقر على الزر، وتقوم بطباعة الرسالة. يتضح لنا من هذا المثال أن دوال الاستدعاء الخلفي لا غنى عنها في التعامل مع الأحداث في JavaScript.

الخاتمة

تُستخدم دوال الاستدعاء الخلفي (Callbacks) بشكل متكرر وأساسي في JavaScript. نأمل أن يكون هذا المقال قد قدم لك فهمًا واضحًا لوظيفتها وكيفية التعامل معها بفعالية. لفهم أعمق للبرمجة غير المتزامنة في JavaScript، يمكنك الانتقال إلى موضوع Promises، والذي يُعد امتدادًا طبيعيًا لمفهوم Callbacks ويقدم حلولًا أكثر تطورًا للتعامل مع العمليات غير المتزامنة. شكرًا لك على القراءة!

الخلاصة التقنية

تُشكل دوال الاستدعاء الخلفي حجر الزاوية في فهم البرمجة غير المتزامنة وتطوير التطبيقات التفاعلية في JavaScript. إن قدرتها على تأخير تنفيذ الكود حتى اكتمال مهمة معينة، أو الاستجابة للأحداث، تجعلها أداة لا غنى عنها للمطورين. ورغم ظهور حلول أحدث مثل Promises و Async/Await التي تُبسط التعامل مع السيناريوهات المعقدة، إلا أن فهم Callbacks يظل أساسيًا لبناء أساس متين في JavaScript والتعامل مع الكود القديم (legacy code) بفعالية.