أجد صعوبة في استيعاب مفهوم Callback Functions في JavaScript

باختصار، الدالة callback هي دالة يتم تمريرها كوسيطة إلى دالة أخرى، ويتم استدعاؤها من قبل الدالة الخارجية بعد اكتمال المهمة التي تم تعيينها لها، والدالة نفسها ليس غير متزامنة بل هي دالة متزامنة، لكن الدالة الخارجية المسؤولة عن استدعاء الدالة أي عمل callback لها هي الدالة الغير متزامنة.

وفي جافاسكريبت، يتم تنفيذ الدوال بشكل متزامن بشكل افتراضي، مما يعني أن الدالة يتم تنفيذها من البداية إلى النهاية قبل الانتقال إلى الدالة التالية، ولكن هناك بعض المهام التي قد تستغرق وقتًا طويلاً للتنفيذ، مثل تحميل ملف أو الاتصال بقاعدة بيانات، وفي تلك الحالات Asynchronous Execution، لا نريد أن تتوقف البرامج الأخرى عن العمل حتى تكتمل تلك  المهام.

وبالتالي تُستخدم الدوال callback لحل تك  بدلاً من انتظار انتهاء المهمة، نقوم بتمرير الدالة callback إلى الدالة الخارجية، وبعد اكتمال المهمة تقوم الدالة الخارجية باستدعاء الدالة callback، والتي يمكنها بعد ذلك التعامل مع النتيجة.

مثال بسيط

لنفترض أننا نريد تحميل ملف من الإنترنت، يمكننا استخدام الدالة fetch() للقيام بذلك، ولكن تلك الدالة ترجع قيمة غير معرفة حتى يكتمل تحميل الملف، أي أنها دالة غير متزامنة.

const file = fetch("http://example.com/quran");

بدلاً من ذلك، يمكننا استخدام الدالة fetch() مع دالة callback، بحيث سيتم استدعاء الدالة callback بعد اكتمال تحميل الملف، وسيكون لها الوصول إلى نتيجة fetch()، كالتالي:

fetch('http://example.com/quran')
	.then(response => response.json())
	.then(data => console.log(data))
	.catch(err => console.error(err));

بمعنى أن then(response => response.json()) هو callback function يتم تمرير الوعد (Promise) المُرجع من fetch إليها ويتم تنفيذها عندما يتم حل الوعد بنجاح، وهي تقوم بتحويل الاستجابة إلى شكل JSON، ونفس الأمر بالنسبة لباقي الدوال.

أمثلة أخرى:

استخدام setTimeout:

function sayHello() {
  console.log("Hello!");
}

setTimeout(sayHello, 2000); // سيتم استدعاء الدالة sayHello بعد 2 ثانية

تمرير دالة كمعامل لدالة أخرى:

let numbers = [1, 2, 3, 4, 5];

function printNumber(num) {
  console.log(num);
}

numbers.forEach(printNumber); // سيتم استدعاء الدالة printNumber لكل عنصر في المصفوفة

كدوال مستجيبة للأحداث (Event Handlers):

// تعريف دالة callback
function handleClick() {
  console.log("Button Clicked!");
}

// تعيين الدالة callback كمعالج لحدث النقر
const buttonElement = document.getElementById("myButton");
buttonElement.addEventListener("click", handleClick);

وبخصوص:

بتاريخ 57 دقائق مضت قال Roog Roog:

هل الدالة callback تأتي دائما as an argument لدالة أخرى ؟

صحيح، فنحن نريد استخدامها لتنفيذ أمرًا ما في وقت معين وليس استدعائها على الفور، ولكن يجب العلم أنها دوال مستقلة أي نقوم بتعريفها كما بالمثال السابق ثم نقوم بتمريرها بدون كتابة القوسين () الخاصين بتنفيذ الدالة حتى يتم استدعائها من قبل الدالة الخارجية.

وستجد هنا تفاصيل أخرى:

يشير مصطلح دالة callback إلى دالة تمرر كوسيط إلى دالة أخرى. عندما تنتهي الدالة الرئيسية من تنفيذ مهمتها الرئيسية، يتم استدعاء الدالة callback لتنفيذ إجراءات إضافية.

يمكنني توضيح الفكرة أكثر بمثال بحيث إذا كنت تعمل على تطبيق ويب وتحتاج إلى تنفيذ مهمة معينة بعد انتهاء عملية معينة مثل تحميل ملف، يمكنك استخدام callback function لذلك. ستمرر الدالة الرئيسية كوسيط عندما تقوم بتشغيل عملية تحميل الملف، وعند اكتمال التنفيذ (بعد اكتمال تحميل الملف)، سيتم تنفيذ ال callback function.

لمعرفة أن الدالة غير مزامنة، نفرض أنه لدينا دالتين الأولى بإسم alpha و الثانية بإسم beta، في مرحلة ما من البرنامج نسوي استدعاء للدالة alpha  و نمرر الدالة beta as argument مثلا EventListener في هذه الحالة سننتظر حتى تنتهي الدالة alpha من العمل و بعدها ستعمل الدالة beta اي مثل الموضح في هذه الصورة:

اما في حالة ان تكون الدالة متزامنة  ستنتظر الى انتهاء الدالة beta بعدها تكمل alpha العمل الخاص بها مثل الموضح في الصورة:

منطق Callbacks بسيط للغاية. الدالة Callback هي مجرد دالة يتم تمريرها كوسيطة إلى دالة أخرى. عندما تنتهي الدالة الأولى من التنفيذ، يتم استدعاء الدالة Callback.

على سبيل المثال، دعنا نقول لدينا دالة تسمى getData() والتي ترجع البيانات من قاعدة البيانات. إذا أردنا عرض البيانات على الصفحة، فيمكننا استخدام دالة Callback لفعل ذلك.

function getData() {
  // احصل على البيانات من قاعدة البيانات
  // استدعاء الدالة callback بعد انتهاء التنفيذ
  callback(data);
}
function showData(data) {
  // عرض البيانات على الصفحة
}
// استدعاء الدالة getData()
getData(showData);

في هذا المثال، يتم تمرير دالة showData() إلى دالة getData() كوسيطة. عندما تنتهي getData() من التنفيذ، يتم استدعاء showData() مع البيانات التي تم إرجاعها من قاعدة البيانات.

تُستخدم Callbacks بشكل شائع في JavaScript لمعالجة المهام غير المتزامنة. المهام غير المتزامنة هي المهام التي قد تستغرق بعض الوقت لإكمالها، مثل تحميل ملف أو إجراء مكالمة AJAX.

عندما يتم تنفيذ دالة غير متزامنة، فإنها لا تنتظر حتى تكتمل المهمة. بدلاً من ذلك، تعود وتستمر في تنفيذ التعليمات البرمجية التالية. يتم استدعاء الدالة Callback في وقت لاحق، عندما تكتمل المهمة.

على سبيل المثال، دعنا نقول لدينا دالة غير متزامنة تسمى loadFile() والتي تقوم بتحميل ملف من الخادم.

function loadFile() {
  // ابدأ تحميل الملف من الخادم
  // استدعاء الدالة callback بعد انتهاء التنفيذ
  callback(file);
}
function showFile(file) {
  // عرض الملف على الصفحة
}
// استدعاء الدالة loadFile()
loadFile(showFile);

في هذا المثال، يتم تمرير دالة showFile() إلى دالة loadFile() كوسيطة. عندما تنتهي loadFile() من تحميل الملف، يتم استدعاء showFile() مع ملف الملف.

هل الدالة callback تأتي دائما as an argument لدالة أخرى؟

لا، لا تأتي الدالة Callback دائمًا كوسيطة لدالة أخرى. يمكن استخدام Callbacks أيضًا كقيم لخصائص أو كوسيطة لطرق.

على سبيل المثال، دعنا نقول لدينا خاصية تسمى onLoad والتي تربط دالة بالحدث load.

// قم بربط دالة بحدث load
window.onload = function() {
  // ...
};

في هذا المثال، يتم استخدام دالة Callback كقيمة لخاصية onLoad. عندما يتم تحميل الصفحة، يتم استدعاء الدالة Callback.

في النهاية، فإن استخدام Callbacks هو مسألة اختيار. في بعض الحالات، قد يكون استخدام Callbacks هو الطريقة الأكثر فاعلية أو كفاءة لتنفيذ مهمة ما.