freeCodeCamp/guide/arabic/javascript/callback-functions/index.md

6.0 KiB

title localeTitle
Callback Functions وظائف رد الاتصال

تقدم هذه المقالة مقدمة موجزة لمفهوم واستخدام وظائف معاودة الاتصال في لغة برمجة Javascript.

وظائف هي كائنات

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

وظائف رد الاتصال

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

لتوضيح معاودة الاتصال ، دعنا نبدأ بمثال بسيط:

`function createQuote(quote, callback){ var myQuote = "Like I always say, " + quote; callback(myQuote); // 2 }

function logQuote(quote){ console.log(quote); }

createQuote("eat your vegetables!", logQuote); // 1

// Result in console: // Like I always say, eat your vegetables! `

في المثال أعلاه ، يعد createQuote هو دالة الترتيب الأعلى ، والتي تقبل الوسيطتين ، والثانية هي معاودة الاتصال. يتم استخدام وظيفة logQuote لتمرير في وظيفة رد الاتصال الخاصة بنا. عندما نقوم بتنفيذ وظيفة createQuote (1) ، نلاحظ أننا لا logQuote أقواس logQuote عندما logQuote كوسيطة. هذا لأننا لا نريد تنفيذ وظيفة معاودة الاتصال الخاصة بنا على الفور ، فنحن نريد ببساطة تمرير تعريف الدالة إلى الوظيفة ذات الترتيب الأعلى بحيث يمكن تنفيذه لاحقًا.

أيضا ، نحن بحاجة إلى التأكد من أنه إذا كانت وظيفة رد الاتصال التي نمررها تتوقع وجود وسيطات ، فإننا نورد هذه الوسيطات عند تنفيذ معاودة الاتصال (2) . في المثال أعلاه ، من شأنه أن يكون callback(myQuote); البيان ، لأننا نعلم أن logQuote يتوقع أن يتم تمرير عرض السعر.

بالإضافة إلى ذلك ، يمكن أن نمر في وظائف مجهولة مثل الاستدعاءات. سيكون للنداء أدناه إلى createQuote نفس النتيجة كما في المثال أعلاه:

createQuote("eat your vegetables!", function(quote){ console.log(quote); });

بالمناسبة ، لا تحتاج إلى استخدام الكلمة "callback" كاسم لوسيطة الخاص بك ، تحتاج Javascript فقط إلى معرفة أنه اسم الوسيطة الصحيح. استناداً إلى المثال أعلاه ، ستتصرف الدالة أدناه بنفس الطريقة بالضبط.

function createQuote(quote, functionToCall) { var myQuote = "Like I always say, " + quote; functionToCall(myQuote); }

لماذا استخدام Callbacks؟

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

دعونا نلقي نظرة على مثال يحاكي طلب إلى الخادم:

`function serverRequest(query, callback){ setTimeout(function(){ var response = query + "full!"; callback(response); },5000); }

function getResults(results){ console.log("Response from the server: " + results); }

serverRequest("The glass is half ", getResults);

// Result in console after 5 second delay: // Response from the server: The glass is half full! `

في المثال أعلاه ، نجري طلبًا زائفًا على الخادم. بعد مرور 5 ثوانٍ يتم تعديل الاستجابة ثم يتم تنفيذ getResults وظيفة رد الاتصال الخاصة بنا. للاطلاع على هذا الإجراء ، يمكنك نسخ / لصق الشفرة الواردة أعلاه في أداة مطور المتصفح وتنفيذها.

أيضًا ، إذا كنت معتادًا على setTimeout ، فإنك تستخدم وظائف رد الاتصال طوال الوقت. تعتبر وسيطة الدالة المجهولة التي تم تمريرها إلى استدعاء الدالة setTimeout المذكورة أعلاه بمثابة استدعاء أيضًا! لذلك يتم تنفيذ رد الاتصال الأصلي للمثال بواسطة رد اتصال آخر. احرص على عدم وضع عدد كبير من عمليات الاسترجاعات إذا كان بإمكانك مساعدتك ، لأن ذلك يمكن أن يؤدي إلى شيء يسمى "callback hell"! كما يوحي الاسم ، فإنه ليس من الفرح التعامل معه.