ב-JavaScript, ישנם מצבים בהם אנו צריכים לוודא שהתוכן שהוזן באתר מסוים מדויק ועדכני. לדוגמה, נדרש להציג את התוכן העדכני ביותר בדף אינטרנט תוך מילוי טופס ארוך ותצפית על השינויים החדשים או כאשר אתה רוצה לבדוק אתר אינטרנט. במקרים כאלה, רענון אוטומטי של דף אינטרנט כל 5 שניות באמצעות JavaScript עוזר מאוד להתמודד עם מצבים מסוג זה.
מאמר זה ידון בשיטות לרענון אוטומטי של דף אינטרנט כל 5 שניות באמצעות JavaScript.
כיצד לרענן אוטומטית דף אינטרנט כל 5 שניות באמצעות JavaScript?
כדי לרענן אוטומטית דף אינטרנט כל 5 שניות באמצעות JavaScript, ניתן להשתמש בגישות הבאות:
עברו על השיטות הנדונות אחת אחת!
שיטה 1: רענון אוטומטי של דף אינטרנט כל 5 שניות ב-JavaScript באמצעות שיטות setInterval() ו-document.querySelector()
ה ' setInterval() שיטת ' ניגשת לפונקציה במרווח זמן מוגדר ו' document.querySelector() השיטה מקבלת את האלמנט הראשון התואם לבורר CSS. ניתן להשתמש בשיטות אלו בשילוב כדי לגשת לתג הכותרת הספציפי ולקבוע את מרווח הזמן לפונקציונליות הנדרשת בעזרת טיימר.
תחביר
setInterval ( פונקציה, אלפיות שניות, par1, par2 )בתחביר לעיל, ' פוּנקצִיָה ' מתייחס לפונקציה שיש לגשת אליה, ' אלפיות השנייה ' הוא מרווח הזמן הספציפי לביצוע, ו' זוג 1 ' ו' par2 ' הם הפרמטרים הנוספים.
מסמך. querySelector ( CSS בוררים )
כאן, ' בוררי CSS ' מייצגים בורר CSS אחד או יותר.
בדוק את הדוגמה הבאה.
דוגמא
ראשית, ציין כותרת וכותרת בתגיות
, בהתאמה:
< כותרת > רענון הדף כל 5 שניות < / כותרת >
< h2 סִגְנוֹן = 'טקסט-align: left' > רענן אוטומטית את הדף < / h2 >
כעת, הגדר ערך טיימר כ' 1 ”:
תן טיימר = 1 ;לאחר מכן, החל את ' setInterval() שיטה עם ' 1000 אלפיות השנייה ' ערך. זה יגדיל את הטיימר בכל שנייה. כמו כן, גש לכותרת שצוינה כדי להציג אותה ב-' Document Object Model (DOM) ' בסיום ערך הטיימר שהוגדר.
לבסוף, חזור על הערך של הטיימר עם התוספת של ' 1 ' באמצעות ' ++ ' לאחר ההגדלה ולהחיל תנאי באופן שאם הערך עולה על 5, ה-' location.reload() השיטה תגרום לטעינה מחדש של החלון:
setInterval ( ( ) => {מסמך. querySelector ( 'h2' ) . innerText = שָׁעוֹן עֶצֶר ;
שָׁעוֹן עֶצֶר ++;
אם ( שָׁעוֹן עֶצֶר > 5 )
מקום. לִטעוֹן מִחָדָשׁ ( ) ;
} , 1000 ) ;
ניתן לראות שדף האינטרנט שלנו מקבל רענון אוטומטי כל חמש שניות:
שיטה 2: רענון אוטומטי של דף אינטרנט כל 5 שניות ב-JavaScript באמצעות אירוע onload
ה ' עומס אירוע מופעל כאשר אובייקט נטען. ניתן ליישם טכניקה זו כדי לרענן את הדף בעזרת פונקציה המוגדרת על ידי המשתמש כאשר דף האינטרנט נטען.
תחביר
לְהִתְנַגֵד. עומס = רענן עמוד ( ) { myScript } ;בתחביר הנתון, ' פוּנקצִיָה ” מתייחס לפונקציה שיש להפעיל כאשר האובייקט נטען.
תסתכל על הדוגמה הבאה.
דוגמא
ראשית, כלול כותרת וכותרת כפי שנדון בשיטה הקודמת:
< כותרת > רענן את הדף כל 5 שניות < / כותרת >< h2 > רענן אוטומטית את הדף < / h2 >
כעת, החל את ' עומס ' אירוע והפעל את הפונקציה ' רענן עמוד() ' ולעבור ' 5000 ' כארגומנט המציין מרווח זמן של חמש שניות:
< עומס הגוף = 'JavaScript:refreshPage(5000);' >גוּף >
לבסוף, הגדר פונקציה בשם ' רענן עמוד() ' עם ' ט ' כארגומנט המתייחס לזמן שנקבע לרענון אוטומטי של דף האינטרנט. ה ' location.reload() ' השיטה תטען מחדש את הדף לאחר הזמן שצוין:
פונקציה refreshPage ( ט ) {setTimeout ( 'location.reload(true);' , ט ) ;
}
תְפוּקָה
שיטה 3: רענון אוטומטי של דף אינטרנט כל 5 שניות ב-JavaScript באמצעות שיטת setTimeout().
ה ' setTimeout() שיטת ” מפעילה פונקציה לאחר זמן מוגדר מוגדר. ניתן ליישם שיטה זו כדי לטעון מחדש דף אינטרנט לאחר פסק זמן מוגדר ספציפי.
תחביר
setTimeout ( פונקציה, אלפיות שניות, par1, par2 )בתחביר הנתון, ' פוּנקצִיָה ' מתייחס לפונקציה שיש לגשת אליה, ' אלפיות השנייה ' הוא מרווח הזמן הספציפי לביצוע, ו' זוג 1 ', ' par2 ' הם הפרמטרים הנוספים.
דוגמא
בתג הסקריפט של דף ה-HTML, החל את ' setTimeout() ' השיטה באופן כזה כאשר עוברות 5 שניות, השיטה location.reload() טוענת מחדש את דף האינטרנט:
< תַסרִיט >setTimeout ( 'location.reload(true);' , 5000 ) ;
תַסרִיט >
תְפוּקָה
דנו בכל השיטות הנוחות לרענון אוטומטי של דף אינטרנט כל 5 שניות באמצעות JavaScript.
סיכום
כדי לרענן אוטומטית דף אינטרנט כל 5 שניות באמצעות JavaScript, השתמש ב-' setInterval() ' ו' document.querySelector() ' שיטות לכוונון ערך הטיימר, ' לְרַעֲנֵן() שיטת ' לרענון דף אינטרנט, או ' setTimeout() ' שיטה להגדרת מגבלת רענון פסק זמן ספציפית של דף אינטרנט. מאמר זה הדגים את השיטות לרענון אוטומטי של דף אינטרנט כל 5 שניות באמצעות JavaScript.