ما هو SetInterval في JavaScript وكيف يعمل؟



يسمح JavaScript أيضًا بتنفيذ الوظائف وكذلك الطرق فيما يتعلق بالوقت. SetInterval في JavaScript هو جزء من أحداث التوقيت.

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

أحداث التوقيت

يسمح JavaScript أيضًا بتنفيذ ملفات المهام وكذلك الطرق فيما يتعلق بالوقت وليس وقت تنفيذ البرنامج. هذا يسمح بتنفيذ الوظائف في الوقت المحدد بغض النظر عن وقت تنفيذ البرنامج.





الطريقتان الرئيسيتان لاستخدام أحداث التوقيت في JavaScript هما:

  • setTimeout (وظيفة ، مللي ثانية)



تقوم هذه الوظيفة بتنفيذ الوظيفة التي بداخلها يتم تمريرها كمعامل مرة واحدة فقط بعد الوقت المحدد بالمللي ثانية.

  • setInterval (دالة ، مللي ثانية)

تقوم هذه الوظيفة بتنفيذ الوظيفة من وقت التنفيذ وبعد كل فترة زمنية يتم الوصول إليها. يكرر تنفيذ الوظيفة في كل فاصل زمني.



دعنا الآن ننتقل ونرى كيف يعمل SetInterval في JavaScript.

SetInterval في JavaScript

المعلمة الأولى لهذه الوظيفة هي الوظيفة المراد تنفيذها والمعلمة الثانية تشير إلى الفاصل الزمني بين كل تنفيذ.

var myVar = setInterval (myTimer، 1000) function myTimer () {var d = new Date () document.getElementById ('demo'). innerHTML = d.toLocaleTimeString ()}

هنا ، يحصل document.getElementById على العنصر من التي لها المعرف كـ 'demo' و d.toLocaleTimeString () تعطي الوظيفة الوقت الحالي من النظام.

ومن ثم ، يتكرر هذا كل 1000 مللي ثانية وهو ما يعادل 1 ثانية. وبالتالي ، يتم تنفيذ الوظيفة بشكل متكرر كل ثانية واحدة ، وبالتالي يتم تحديث الوقت كل ثانية.

فكيف نوقف هذا الإعدام؟ هيا نكتشف!

كيف نوقف الإعدام؟

يمكننا إيقاف التنفيذ من الوظيفة setInterval () بمساعدة دالة أخرى تسمى clearInterval ().يستخدم clearInterval () المتغير الذي تم إرجاعه من الدالة setInterval ().

فمثلا:

myVar = setInterval (وظيفة ، ملي ثانية) clearInterval (myVar)

يوجد أدناه مثال يستخدم كلاً من setInterval () وكذلك clearInterval (). يؤدي ذلك إلى بدء تشغيل الساعة ويوفر زرًا لإيقاف الوقت.

 

يوجد أدناه ساعة.

توقف الوقت

انقر فوق الزر أعلاه لإيقاف الوقت.

var myVar = setInterval (myTimer، 1000) function myTimer () {var d = new Date () document.getElementById ('demo'). innerHTML = d.toLocaleTimeString ()}

انتاج:

الإخراج - setinterval في جافا سكريبت - edureka

بعض الأمثلة الأخرى باستخدام setInterval () و clearInterval ().

إنشاء شريط تقدم ديناميكي

#myProgress {width: 100٪ height: 30px position: النسبي background-color: #ddd} #myBar {background-color: # 4CAF50 width: 10px height: 30px position: definitely} 
Click Me function move () {var elem = document.getElementById ('myBar') var width = 0 var id = setInterval (frame، 10) function frame () {if (width == 100) {clearInterval (id)} else {width ++ elem.style.width = width + '٪'}}}

انتاج:

الإخراج الأولي

الإخراج بعد النقر على الزر الذي يقول 'انقر فوقي'.

التبديل بين خلفيتين

إيقاف تبديل var myVar = setInterval (setColor، 300) function setColor () {var x = document.body x.style.backgroundColor = x.style.backgroundColor == 'yellow'؟ 'pink': 'yellow'} وظيفة stopColor () {clearInterval (myVar)}

انتاج:

الفرق بين خريطة التجزئة وجدول التجزئة

سيتم تبديل اللون بين الأصفر والوردي. الإخراج أعلاه قبل النقر فوق الزر أدناه بعد النقر فوق الزر.

بهذا نكون قد وصلنا إلى نهاية مقالنا SetInterval in JavaScript. آمل أن تكون قد فهمت كيف تعمل طريقة SetInterval.

تفحص ال بواسطة Edureka. سيساعدك تدريب شهادة تطوير الويب على تعلم كيفية إنشاء مواقع ويب رائعة باستخدام HTML5 و CSS3 و Twitter Bootstrap 3 و jQuery و Google APIs ونشرها في Amazon Simple Storage Service (S3).

لديك سؤال لنا؟ يرجى ذكر ذلك في قسم التعليقات في هذه المدونة وسنعاود الاتصال بك.