في JavaScript ، هناك مواقف نحتاج فيها إلى التأكد من أن المحتوى الذي تم إدخاله على موقع معين دقيق وحديث. على سبيل المثال ، يلزم عرض أحدث محتوى على صفحة ويب أثناء ملء نموذج مطول ومراقبة التغييرات الجديدة أو عندما تريد اختبار موقع ويب. في مثل هذه الحالات ، يكون التحديث التلقائي لصفحة الويب كل 5 ثوانٍ باستخدام JavaScript مفيدًا جدًا في التعامل مع هذه الأنواع من المواقف.
ستناقش هذه المقالة طرق التحديث التلقائي لصفحة الويب كل 5 ثوانٍ باستخدام JavaScript.
كيفية التحديث التلقائي لصفحة الويب كل 5 ثوانٍ باستخدام JavaScript؟
للتحديث التلقائي لصفحة الويب كل 5 ثوانٍ باستخدام JavaScript ، يمكن استخدام الطرق التالية:
اذهب من خلال الطرق التي تمت مناقشتها واحدة تلو الأخرى!
الطريقة الأولى: التحديث التلقائي لصفحة الويب كل 5 ثوانٍ في JavaScript باستخدام أساليب setInterval () و document.querySelector ()
ال ' setInterval () 'طريقة الوصول إلى وظيفة في فترة زمنية محددة و' document.querySelector () 'يحصل على العنصر الأول الذي يطابق محدد CSS. يمكن استخدام هذه الطرق معًا للوصول إلى علامة العنوان المحددة وتعيين الفاصل الزمني للوظيفة المطلوبة بمساعدة جهاز ضبط الوقت.
بناء الجملة
تعيين الفاصل الزمني ( دالة ، مللي ثانية ، بار 1 ، بار 2 )في الصيغة أعلاه ، ' وظيفة 'يشير إلى الوظيفة التي يجب الوصول إليها ،' مللي ثانية 'هو الفاصل الزمني المحدد للتنفيذ ، و' زوج 1 ' و ' بار 2 'هي المعلمات الإضافية.
وثيقة. الاستعلام ( CSS المحددات )
هنا، ' محددات CSS 'يمثل واحدًا أو أكثر من محددات CSS.
تحقق من المثال التالي.
مثال
أولاً ، حدد عنوانًا وعنوانًا في علامتي
، على التوالي:
< لقب > تحديث الصفحة كل 5 ثوان < / لقب >
< h2 نمط = 'محاذاة النص: يسار' > تحديث تلقائي للصفحة < / h2 >
الآن ، عيِّن قيمة المؤقت كـ ' 1 ':
دع الموقت = 1 ؛بعد ذلك ، قم بتطبيق ' setInterval () 'مع' 1000 مللي ثانية ' القيمة. سيؤدي هذا إلى زيادة عداد الوقت كل ثانية. أيضًا ، قم بالوصول إلى العنوان المحدد لعرضه على ' نموذج كائن المستند (DOM) 'في نهاية قيمة المؤقت المحدد.
أخيرًا ، كرر قيمة المؤقت مع زيادة ' 1 ' استخدام ' ++ 'عامل التشغيل اللاحق للزيادة وتطبيق شرط بطريقة إذا تجاوزت القيمة 5 ، فإن' location.Reload () 'يؤدي إلى إعادة تحميل النافذة:
تعيين الفاصل الزمني ( ( ) => {وثيقة. الاستعلام ( 'h2' ) . النص الداخلي = جهاز ضبط الوقت ؛
جهاز ضبط الوقت ++ ؛
إذا ( جهاز ضبط الوقت > 5 )
موقعك. إعادة تحميل ( ) ؛
} و 1000 ) ؛
يمكن ملاحظة أن صفحة الويب الخاصة بنا يتم تحديثها تلقائيًا كل خمس ثوانٍ:
الطريقة الثانية: التحديث التلقائي لصفحة الويب كل 5 ثوانٍ في JavaScript باستخدام حدث التحميل
ال ' تفريغ 'يتم تشغيل الحدث عند تحميل كائن. يمكن تنفيذ هذه التقنية لتحديث الصفحة بمساعدة وظيفة محددة من قبل المستخدم عند تحميل صفحة الويب.
بناء الجملة
هدف. تفريغ = إعادة تحميل الصفحة ( ) { myScript } ؛في الصيغة المحددة ، ' وظيفة 'يشير إلى الوظيفة التي يجب استدعاؤها عند تحميل الكائن.
ننظر إلى المثال التالي.
مثال
أولاً ، قم بتضمين العنوان والعنوان كما تمت مناقشته في الطريقة السابقة:
< لقب > تحديث الصفحة كل 5 ثوان < / لقب >< h2 > تحديث تلقائي للصفحة < / h2 >
الآن ، قم بتطبيق ' تفريغ 'واستدعاء الوظيفة' إعادة تحميل الصفحة() 'واجتاز' 5000 'كوسيطة تشير إلى فاصل زمني مدته خمس ثوان:
< تحميل الجسم = 'JavaScript: RefreshPage (5000) ؛' >هيئة >
أخيرًا ، حدد وظيفة باسم ' إعادة تحميل الصفحة() ' مع ' ر 'كحجة تشير إلى الوقت المحدد للتحديث التلقائي لصفحة الويب. ال ' location.Reload () 'طريقة إعادة تحميل الصفحة بعد الوقت المحدد:
وظيفة RefreshPage ( ر ) {setTimeout ( 'location.reload (صحيح) ؛' ، ر ) ؛
}
انتاج |
الطريقة الثالثة: التحديث التلقائي لصفحة الويب كل 5 ثوانٍ في JavaScript باستخدام طريقة setTimeout ()
ال ' setTimeout () 'طريقة استدعاء دالة بعد وقت محدد. يمكن تطبيق هذه الطريقة لإعادة تحميل صفحة ويب بعد انتهاء مهلة محددة.
بناء الجملة
setTimeout ( دالة ، مللي ثانية ، بار 1 ، بار 2 )في الصيغة المحددة ، ' وظيفة 'يشير إلى الوظيفة التي سيتم الوصول إليها ،' مللي ثانية 'هو الفاصل الزمني المحدد للتنفيذ ، و' زوج 1 '،' بار 2 'هي المعلمات الإضافية.
مثال
في علامة البرنامج النصي لصفحة HTML ، قم بتطبيق ' setTimeout () 'بهذه الطريقة عند مرور 5 ثوانٍ ، فإن طريقة location.reload () تعيد تحميل صفحة الويب:
< النصي >setTimeout ( 'location.reload (صحيح) ؛' و 5000 ) ؛
النصي >
انتاج |
لقد ناقشنا جميع الطرق الملائمة للتحديث التلقائي لصفحة الويب كل 5 ثوانٍ باستخدام JavaScript.
استنتاج
لتحديث صفحة ويب تلقائيًا كل 5 ثوانٍ باستخدام JavaScript ، استخدم ' setInterval () ' و ' document.querySelector () 'لضبط قيمة المؤقت ، فإن' تحديث() 'لتحديث صفحة ويب ، أو' setTimeout () 'لتعيين حد تحديث مهلة محدد لصفحة الويب. توضح هذه المقالة طرق التحديث التلقائي لصفحة الويب كل 5 ثوانٍ باستخدام JavaScript.