لغة JavaScript

 

ما المقصود بـ JavaScript؟

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

فيمَ تُستخدم JavaScript؟

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

ومع تطور اللغة، أنشأ مطورو JavaScript مكتبات وأُطر عمل وممارسات برمجة وبدؤوا في استخدامها خارج متصفحات الويب. واليوم، يمكن استخدام JavaScript للتطوير من طرف العميل ومن طرف الخادم. خلال الأقسام الفرعية التالية، سنستعرض بعضًا من حالات الاستخدام الشائعة:

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

ومع تطور اللغة، أنشأ مطورو JavaScript مكتبات وأُطر عمل وممارسات برمجة وبدؤوا في استخدامها خارج متصفحات الويب. واليوم، يمكن استخدام JavaScript للتطوير من طرف العميل ومن طرف الخادم. خلال الأقسام الفرعية التالية، سنستعرض بعضًا من حالات الاستخدام الشائعة:

كيف تعمل JavaScript؟

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

محرك JavaScript

محرك JavaScript هو برنامج حاسوبي يشغّل تعليمة JavaScript البرمجية. ورغم أن محركات JavaScript الأولى كانت عبارة عن أدوات تفسير (مترجمين)، إلا أن جميع المحركات الحديثة تستخدم التحويل في الوقت المناسب أو تحويل وقت التشغيل لتحسين الأداء.

JavaScript من جانب العميل

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

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

وفيما يلي نظرة عامة حول كيفية عمل JavaScript من جانب العميل:

1.   يقوم المتصفح بتحميل صفحة ويب عند زيارة هذه الصفحة.

2.   أثناء التحميل، يقوم المتصفح بتحويل الصفحة وجميع عناصرها، مثل الأزرار والتسميات والمربعات المنسدلة، إلى هيكل بيانات يُسمى نموذج كائن المستند (DOM).

3.   يقوم محرك JavaScript الموجود بالمتصفح بتحويل تعليمة JavaScript البرمجية إلى بايت كود. وتصبح هذه التعليمة البرمجية بمثابة وسيط بين بناء جملة JavaScript والجهاز.

4.   تؤدي الأحداث المختلفة، مثل النقر بالماوس على أحد الأزرار، إلى تشغيل كتلة تعليمات JavaScript البرمجية المرتبطة. بعد ذلك، يقوم المحرك بترجمة البايت كود وإجراء تغييرات في نموذج DOM.

5.   يعرض المتصفح نموذج DOM الجديد.

JavaScript من جانب الخادم

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

من جانب العميل مقابل من جانب الخادم

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

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

ما المقصود بمكتبات JavaScript؟

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

فيما يلي بعض الاستخدامات الشائعة لمكتبات JavaScript:

العرض المرئي للبيانات

يُعد العرض المرئي للبيانات أمرًا بالغ الأهمية للمستخدمين لعرض الإحصائيات، على سبيل المثال، في لوحة الإدارة ولوحة المعلومات وقياسات الأداء.

تتضمن مكتبات مثل Chart.js وApexCharts وAlgolia Places وظائف مضمنة يمكنك استخدامها في إنشاء تطبيقات ويب تعرض البيانات في شكل مخططات بيانية وخرائط.

معالجة نموذج DOM

يمكنك استخدام مكتبات مثل مكتبة jQuery ومكتبة Umbrella JS لتسهيل تطوير الويب لأنها توفر تعليمة برمجية لوظائف مواقع الويب القياسية مثل الرسوم المتحركة للقوائم ومعارض الصور والأزرار ونوافذ lightbox وغير ذلك الكثير.

النماذج

جميع عمليات تطوير الويب تستخدم نماذج لزوار مواقع الويب للاتصال بأي شخص، وطلب المنتجات، والتسجيل في الأحداث. تعمل بعض مكتبات JavaScript مثل wForms، وLiveValidation، وValidanguage، وqForms على تبسيط وظائف النماذج، بما في ذلك التحقق من صحة النماذج والتخطيط والشروط والتحويل.

وظائف النص والرياضيات

يتعين على العديد من تطبيقات الويب حل المعادلات الرياضية ومعالجة التواريخ والأوقات والنصوص. وبدلاً من إرسال كل هذه الطلبات إلى الخادم، فإن التعامل مع بعضها من جانب العميل يكون أكثر كفاءة. يقوم مطورو الويب بذلك من خلال استخدام مكتبات JavaScript مثل Date.js، وSylvester، وJavaScript URL Library

ما المقصود بأُطر عمل JavaScript؟

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

وفيما يلي بعض الأمثلة لحالات استخدام أطر عمل JavaScript:

تطوير تطبيقات الويب وتطبيقات الأجهزة المحمولة

AngularJS هو إطار عمل يبسط عملية تطوير تطبيقات الويب واختبارها، مثل تطبيقات التجارة الإلكترونية وتطبيقات الوقت الفعلي وتطبيقات الفيديو. ويُعد React Native إطار عمل آخر يدعم تطوير تطبيقات الأجهزة المحمولة المعدة أصلاً لنظام تشغيل iOS ونظام تشغيل Android.

تطوير الويب المتجاوب

توفر مواقع الويب المتجاوبة للمستخدم تجربةً متسقةً عبر أي جهاز. على سبيل المثال، تتضمن الأجهزة المحمولة والأجهزة اللوحية شاشات أصغر من تلك الشاشات الموجود بأجهزة سطح المكتب وأجهزة الكمبيوتر المحمولة. ومن المؤكد أنك ترغب في أن يقوم موقع الويب بعرض البيانات وتقديمها بدقة حتى على الشاشة الأصغر، بدون الاقتصاص من أطراف الموقع، على سبيل المثال. ومن خلال استخدام أُطر عمل مثل Bootstrap وEmber.js، يمكن للمطورين الاستفادة من التصميم المتجاوب وتخصيص شكل موقع الويب ونمطه بسهولة عبر منصات مختلفة.

تطوير التطبيقات من جانب الخادم

Node.js هو إطار عمل JavaScript من جانب الخادم مفتوح المصدر يُشغّل تعليمة JavaScript البرمجية خارج المتصفح. يستخدم المطورون إطار العمل هذا في إنشاء تطبيقات من جانب الخادم قابلة للتوسع وسريعة وموثوقة. ويمكن لإطار العمل هذا التعامل مع طلبات HTTP وتدفق البيانات ودعم أنظمة الملفات وإدارة العمليات الخلفية المتعددة على نحو متزامن.

ما المقصود بلغة HTML وCSS؟

لغة ترميز النص التشعبي (HTML) ولغة أوراق الأنماط المتتالية (CSS) هما لغتا برمجة أخريان يستخدمهما المطورون في تطوير الواجهة الأمامية. وتُعد لغة HTML هي لبنة البناء الأساسية لمعظم صفحات الويب. تُكتب جميع الفقرات والأقسام والصور والعناوين والنصوص بلغة HTML. ويظهر المحتوى على موقع الويب حسب ترتيب كتابته بلغة HTML.

أما لغة CSS فهي لغة قواعد أنماط نستخدمها في تطبيق النمط على محتوى HTML. ويمكنك استخدامها في تصميم عناصر موقع الويب مثل ألوان الخلفية والخطوط والأعمدة والحدود.

لغة HTML مقابل لغة CSS مقابل JavaScript

تعمل اللغات الثلاث معًا لمنح المستخدم تجربةً إيجابيةً على أي موقع. ورغم أن لغة HTML ولغة CSS تتعاملان مع المحتوى الثابت بشكل أساسي، إلا أنهما قادرتان على التكامل مع تعليمة JavaScript البرمجية من جانب العميل لتحديث المحتوى ديناميكيًا أيضًا.

على سبيل المثال، يمكن لكتلة التعليمات البرمجية للبرنامج النصي بصفحة HTML أن تحتوي بداخلها على JavaScript. وحينئذٍ، يمكن للمتصفح معالجة كل من لغة HTML وتعليمة JavaScript البرمجية الداخلية عند تحميل صفحة HTML في المتصفح.

شرح أهم أساسيات لغة جافا سكريبت

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

شرح المتغيرات في لغة javascript

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

توجد طريقتين لتعريف متغير من أي نوع كان وهذان الطريقتان هما:

• طريقة var: عند استخدام هذه الطريقة لتعريف المتغير فإن هذه المتغيرات يمكن التعامل معها في نطاق معين مثل الدوال فقط، ويعرف عند المبرمجين بالمتغير المحلي أو الخاص local.
• طريقة let: أما عندما نستخدم let فيمكننا حينها استخدام المتغير وتحديثه من أي مكان في البرنامج، وهو ما يعرف بالمتغير العام global.

خطورة المتغيرات العامة

يمكن أن تكون المتغيرات العامة في الملف المكتوب بلغة جافا سكريبت، لأنها تكون معرّضه للتغير من قبل أي شخص، مثال البرنامج التالي:

;let var1 = 0

 }()function var2

;let var3= 3
;let var4 = 4

{
;"var var5 = "hello

في هذا المثال توجد ثلاث متغيرات عامة وهي var1 وvar2 وvar5 ، تلاحظ بأن الدالة نفسها متغير عام، أم بالنسبة للمتغيرات التي داخلها فهي محلية، بالتالي حتى لو وضعنا الكود بالكامل في دالة واحدة سيبقى لدينا متغير عام واحد، إذن كيف نجعل عدد المتغيرات global يساوي صفرً؟

يمكن تطبيق الكود التالي لجعل جميع المتغيرات والدوال local:

}() function )

كتابة جميع الأكواد والدوال هنا

 ;()  ({
(صورة على التطبيق)

شرح ربط ملف javascript بصفحة html

في الحقيقة ربط ملف لغة جافا سكريبت لا يختلف كثيرًا عن طريقة ربط ملف css إلى صفحة html، فقط اتبع أحد الطرق الآتية:

• إما إنشاء ملف يحمل الامتداد js. في نفس المجلد لملف html، ثم كتابة كود في وسم head وهو:

< "script type="text/javascript" scr="file.js>

<script/>

بعد ذلك تكتب كافة الأكواد والدوال في الملف، وهذه هي أفضل طريقة.

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

الدوال في لغة javascript

هناك نوعان من الدوال التي يمكن استخدامها في كأحد أساسيات لغة جافا سكريبت، وهي:

الدوال المعرفة مسبقًا: وهي الدوال التي تساعد على عمل معين في لغة جافا سكريبت واشهرها هي دالة() alert، حيث تمرر فيها  أي قيمة لكي يعرضها المتصفحة كرسالة تنبيه مثلًا:

;alert("Welcome visitor")

قائمة بأهم الدوال الجاهزة في لغة جافا سكريبت:

الدالة	الغرض منها
()toString	مثل اللغات الأخرى، تحوّل أي قيمة عددية إلى قيمة نصية
()valueOf	يعيد القيمة العددية
()indexOf	يعيد العنوان لعنصر معين سوآء أكان في مصفوفة أو حتى لنص معين.
()charAt	يعيد قيمة الحرف في النص بحسب انديكس محدد، حيث نمرر إليه العنوان.
()concat	يقوم بتجميع قيمتين نصيتين وتعيد لنا القيمة الناتجة.
()length	يعيد لنا قيمة طول النص.
()toLowerCase	يحول النص كله إلى حروف صغيرة.
()toUpperCase	يحول النص كله إلى حروف كبيرة.
()search	يقوم بالبحث عن تعبير نصي في string محدد.
()split	يقسّم نصًا معينًا إلى مصفوفة تتكون من عدد من النصوص الفرعية.
()pow	دالة الأس الرياضية.
()link	ينشأ عنصر link من لغة html وذلك لطلب عنوان URL آخر.
()join	لضم ودمج كل العناصر في مصفوفة إلى string
()sort	لترتيب عناصر مصفوفة ما.
()Date	هذه الدالة تعيد الوقت والتاريخ

ملاحظة: قد توجد هذه الدوال داخل كائنات، لذا يجب ذكرها لاستخدامها، مثل ()Math.pow.

الدوال التي يعرفها المبرمج: ويكون ذلك بذكر الكلمة المفتاحية function يليه اسم الدالة ثم () لكتابة البارامترات بها (أي القيم المراد تمريرها إلى الدالة)، ثم فتح حاصرتين {…} تضع فيها جميع أكواد الجافا سكريبت، مثال على ذلك:

()function test

}

;"let name = "Mohammed

; alert ("Hello" + name)

{

شرح التعليقات في لغة جافا سكريبت

تعد التعليقات أيضًا أحد أساسيات لغة جافا سكريبت، أو حتى أي لغة أخرى بشكل عام حيث، تشبه التعليقات في لغة جافا سكريبت التعليقات في لغة c++ و الجافا، حيث يمكن تضمين تعليق بطريقتين هما:

• التعليق في سطر واحد: من خلال علامة السلاش مرتين فقط “//”.
• التعليق متعدد الأسطر ليتضمن أسطر متعددة من خلال وضع العلامة /*جميع تعليقاتك هنا*/.

اللوب والجمل الشرطية في لغة javascript

تتشابه لغة c++ مع جافا سكريبت وحتى لغة الجافا في كيفية كتابة الكود، مثال بسيط على برنامج مكتوب بواسطة لغة جافا سكريبت يعطي مجموع الأعداد الزوجية التي تبدا من 1 إلى 100 حيث أن  فيه جملة if و كذلك for:

;let sum = 0

}( ++let x=1 ; x<=100 ; x)for

}(x %2== 0)if

;sum = sum + y

{

{

كما أن الفرق بين جمل while و Do while و for بسيط كما في لغة السي بلاس بلاس من هنا.

الأحداث في لغة جافا سكريبت

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

<DOCETYPE html!>

<html>

<head>

<script>

}()function f

;("You already clicked")alert

{

<script/>

<head/>

<body>

<div/> انقر هنا  < ";()div onclick="f>

<body/>

<html/>

لاحظ وجود الفاصلة المنقوطة داخل علامة التنصيص عند الاستدعاء للدالة.

الوصول إلى المحتويات وتعديلها

يمكن الوصول إلى عناصر صفحة html أو حتى التعديل عليها من خلال استدعاء العنصر بواسطة هويته id ثم وضعه في متغير، والطريقة كالتالي:

;("id") let anyName = document.getElementById

حيث يتم استبدال ما بين علامتي التنصيص بالأيدي للعنصر، نلاحظ أننا لم نستخدم علامة # في البداية بعكس ما كنا نقوم به داخل أكواد الصفحة.

أيضا يمكن تعديل محتوى أي عنصر من خلال استدعائه بواسطة الهوية id ثم استخدام innerhtml كالمثال التالي:

;"document.getElementById("id1").innerHTML = "put your new contents

المؤقت لدوال لغة javascript

يستخدم المؤقت لتأخير تنفيذ الدوال بزمن محدد وهناك أربع دوال لذلك وهي:

function sayHi() {
  alert('Hello');
}

setTimeout(sayHi, 1000);

function sayHi(phrase, who) {
  alert( phrase + ', ' + who );
}

setTimeout(sayHi, 1000, "Hello", "John"); // Hello, John

If the first argument is a string, then JavaScript creates a function from it.

So, this will also work:

setTimeout("alert('Hello')", 1000);

But using strings is not recommended, use arrow functions instead of them, like this:

setTimeout(() => alert('Hello'), 1000);

Pass a function, but don’t run it

يُخطئ المبرمجون المبتدئون أحيانًا فيُضيفون أقواس ‎()‎ بعد الدالة:

// wrong!
setTimeout(sayHi(), 1000);

لن يعمل ذلك إذ يتوقّع ‎setTimeout‎ إشارة إلى الدالة، بينما هنا ‎sayHi()‎ يشغّل الدالة وناتج التنفيذ هو الذي يُمرّر إلى ‎setTimeout‎. في حالتنا ناتج ‎sayHi()‎ ليس معرّفًا ‎undefined‎ (إذ لا تُعيد الدالة شيئًا)، ويعني ذلك أنّ عملنا ذهب سدًى ولم نُجدول أي شيء.

الإلغاء باستعمال دالة clearTimeout

نستلمُ حين نستدعي ‎setTimeout‎ «هويّةَ المؤقّت» ‎timerId‎ ويمكن استعمالها لإلغاء عملية التنفيذ.

The syntax to cancel:

let timerId = setTimeout(...);
clearTimeout(timerId);

In the code below, we schedule the function and then cancel it (changed our mind). As a result, nothing happens:

let timerId = setTimeout(() => alert('never happens'), 1000);
alert(timerId); // timer identifier

clearTimeout(timerId);
alert(timerId); // same identifier (doesn't become null after canceling)

يمكن أن نرى من ناتج التابِع ‎alert‎ أنّ هويّة المؤقّت (في المتصفّحات) هي عدد. يمكن أن تكون في البيئات الأخرى أيّ شيء آخر. فمثلًا في Node.js نستلم كائن مؤقّت فيه توابِع أخرى.

Again, there is no universal specification for these methods, so that’s fine.

يمكنك مراجعة مواصفة HTML5 للمؤقّتات (داخل المتصفّحات) في فصل المؤقّتات.

setInterval

صياغة الدالة ‎setInterval‎ هي ذات ‎setTimeout‎:

let timerId = setInterval(func|code, [delay], [arg1], [arg2], ...)

ولكلّ المُعاملات ذات المعنى. ولكن على العكس من ‎setTimeout‎ فهذا التابِع يشغّل الدالة مرّة واحدة ثمّ أخرى وأخرى وأخرى تفصلها تلك الفترة المحدّدة.

يمكن أن نستدعي ‎clearInterval(timerId)‎ لنُوقف الاستدعاءات اللاحقة.

سيعرض المثال الآتي الرسالة كلّ ثانيتين اثنتين، وبعد خمس ثوان يتوقّف ناتجها:

// repeat with the interval of 2 seconds
let timerId = setInterval(() => alert('tick'), 2000);

// after 5 seconds stop
setTimeout(() => {
  clearInterval(timerId);
  alert('stop');
}, 5000);

Time goes on while alertis shown

So if you run the code above and don’t dismiss the alert window for some time, then the next alert will be shown immediately as you do it. The actual interval between alerts will be shorter than 2 seconds.

Nested setTimeout

There are two ways of running something regularly.

الأولى هي ‎setInterval‎. والثانية هي ‎setTimeout‎ متداخلة هكذا:

/** instead of:
let timerId = setInterval(() => alert('tick'), 2000);
*/

let timerId = setTimeout(function tick() {
  alert('tick');
  timerId = setTimeout(tick, 2000); // (*)
}, 2000);

تابِع ‎setTimeout‎ أعلاه يُجدول الاستدعاء التالي ليحدث بعد نهاية الأول (لاحظ ‎(*)‎).

كتابة توابِع ‎setTimeout‎ متداخلة يعطينا شيفرة مطواعة أكثر من ‎setInterval‎. بهذه الطريقة يمكن تغيير جدولة الاستدعاء التالي حسب ناتج الحالي.

فمثلًا علينا كتابة خدمة تُرسل طلب بيانات إلى الخادوم كلّ خمس ثوان، ولكن لو كان الخادوم مُثقلًا بالعمليات فيجب أن تزداد الفترة إلى 10 فَـ 20 فَـ 40 ثانية وهكذا…

إليك فكرة عن الشيفرة:

let delay = 5000;

let timerId = setTimeout(function request() {
  ...send request...

  if (request failed due to server overload) {
    // increase the interval to the next run
    delay *= 2;
  }

  timerId = setTimeout(request, delay);

}, delay);

And if the functions that we’re scheduling are CPU-hungry, then we can measure the time taken by the execution and plan the next call sooner or later.

يتيح لنا تداخل التوابِع ‎setTimeout‎ بضبط الفترة بين عمليات التنفيذ بدقّة أعلى ممّا تقدّمه ‎setInterval‎.

لنرى الفرق بين الشيفرتين أسفله. الأولى تستعمل ‎setInterval‎:

let i = 1;
setInterval(function () {
  func(i++);
}, 100);

الثانية تستعمل ‎setTimeout‎ متداخلة:

let i = 1;
setTimeout(function run() {
  func(i++);
  setTimeout(run, 100);
}, 100);