setTimeout

المشكلة هنا تكمن في طريقة عمل setTimeout. فالكود الذي كتبته:

setTimeout(console.log("Hello Yehia"), 3000);

هذا لا يعمل كما تتوقع لأنك نفذت console.log مباشرة بدل أن ترسلها كدالة ليتم تنفيذها بعد 3 ثوان.

وإليك كيف تعمل الدالة setTimeout  تتوقع الشكل التالي:

setTimeout(دالة, الوقت);

يعني أن : 

• الوسيط الأول: دالة (Function)
• الوسيط الثاني: عدد المللي ثانية التي يتم تنفيذ الدالة بعدها.

هكذا :

setTimeout(() => {
  console.log("Hello Yehia");
}, 3000);

إذا setTimeout تحتاج أن يتم تمرير دالة لها حتى تقوم بتنفيذ تلك الدالة بعد عدد معين من الثواني . ولكن لو لم تمرر لها دالة فسيتم تنفيذ الكود في الحال كما حدث معك. إذا يجب عليك تمرير دالة إلى setTimeout سواء كانت دالة سهمية أو دالة عادية .

ما معنى () => : هذه تسمى Arrow Function أى دالة سهمية وهي طريقة مختصرة لكتابة الدوال في JavaScript بشكل سريع.

فمثلا الشكل العادي للدالة : 

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

نفس الشيء بالـ Arrow Function:

() => {
  console.log("Hello");
}

إذا تستخدم الدالة السهمية للسهولة وإستخدام دالة في مكان واحد ولن تستخدمها في أكثر من مكان وهنا بدلا من تعريف دالة في مكان منفصل وإستخدامها مرة واحدة نستخدم الدالة السهمية مباشرة في المكان الذي نريده .

بتاريخ 8 دقائق مضت قال Yehia Amin2:

ولماذا عند تهميش arrow function  لا يعمل الكود؟!

كما أخبرتك لأن هذا هو طريقة عمل setTimeout يجب أن تمرر دالة لها ليتم تنفيذ تلك الدالة بعد مدة من الزمن ولكن إذا لم تمرر لها دالة فلن تستطيع أن تعرف setTimeout ما الذي ستنفذه بعد المدة المحددة .

ربما قمت برؤية مثل يستخدم ال console.log مباشرة بدالة setTimeout ولذلك يمكنك استغلال ميزة في setTimeout وهي أنها تقبل معاملات إضافية (Arguments) بعد تحديد الوقت، ليتم تمريرها للدالة الأساسية هكذا

setTimeout(console.log, 3000, "Hello Yehia");