В JavaScript има ситуации, когато трябва да гарантираме, че въведеното съдържание на определен сайт е точно и актуално. Например, изисква се да се показва най-новото съдържание на уеб страница, докато попълвате дълъг формуляр и наблюдавате новите промени или когато искате да тествате уебсайт. В такива случаи автоматичното опресняване на уеб страница на всеки 5 секунди с помощта на JavaScript е много полезно за справяне с този тип ситуации.
Тази статия ще обсъди методите за автоматично опресняване на уеб страница на всеки 5 секунди с помощта на JavaScript.
Как да опреснявате автоматично уеб страницата на всеки 5 секунди с помощта на JavaScript?
За автоматично опресняване на уеб страница на всеки 5 секунди с помощта на JavaScript могат да се използват следните подходи:
Преминете през обсъжданите методи един по един!
Метод 1: Автоматично опресняване на уеб страницата на всеки 5 секунди в JavaScript с помощта на методите setInterval() и document.querySelector()
„ setInterval() ” достъп до функция в определен интервал от време и „ document.querySelector() ” получава първия елемент, съответстващ на CSS селектор. Тези методи могат да се използват в комбинация за достъп до конкретния заглавен таг и задаване на времевия интервал на необходимата функционалност с помощта на таймер.
Синтаксис
setInterval ( функция, милисекунди, пар1, пар2 )В горния синтаксис „ функция ' се отнася до функцията, която трябва да бъде достъпна, ' милисекунди ” е конкретният интервал от време за изпълнение, а „ двойка 1 ' и ' пар2 ” са допълнителните параметри.
документ. querySelector ( CSS селектори )
Тук, ' CSS селектори ” представляват един или повече от един CSS селектори.
Вижте следния пример.
Пример
Първо, задайте заглавие и заглавие съответно в таговете
:
< заглавие > Страницата се обновява на всеки 5 секунди < / заглавие >
< h2 стил = 'подравняване на текст: ляво' > Автоматично опресняване на страницата < / h2 >
Сега задайте стойност на таймера като „ 1 ”:
нека таймер = 1 ;След това приложете „ setInterval() ' метод с ' 1000ms ” стойност. Това ще увеличава таймера всяка секунда. Освен това отворете указаното заглавие, за да го покажете на „ Обектен модел на документ (DOM) ” след края на зададената стойност на таймера.
И накрая, итерирайте стойността на таймера със стъпка „ 1 ' използвайки ' ++ ” след нарастване и приложете условие по такъв начин, че ако стойността надвишава 5, „ location.reload() ” ще доведе до презареждане на прозореца:
setInterval ( ( ) => {документ. querySelector ( 'h2' ) . innerText = таймер ;
таймер ++;
ако ( таймер > 5 )
местоположение. презаредете ( ) ;
} , 1000 ) ;
Може да се види, че нашата уеб страница се опреснява автоматично на всеки пет секунди:
Метод 2: Автоматично опресняване на уеб страницата на всеки 5 секунди в JavaScript с помощта на събитие за зареждане
„ зареждане ” се задейства, когато даден обект е зареден. Тази техника може да се приложи за опресняване на страницата с помощта на дефинирана от потребителя функция, когато уеб страницата се зареди.
Синтаксис
обект. зареждане = refreshPage ( ) { myScript } ;В дадения синтаксис „ функция ” се отнася до функцията, която трябва да бъде извикана, когато обектът е зареден.
Вижте следния пример.
Пример
Първо, включете заглавие и заглавие, както е обсъдено в предишния метод:
< заглавие > Страницата се обновява на всеки 5 секунди < / заглавие >< h2 > Автоматично опресняване на страницата < / h2 >
Сега приложете „ зареждане ' събитие и извикване на функцията ' refreshPage() 'и преминете' 5000 ” като аргумент, който показва интервал от време от пет секунди:
< натоварване на тялото = 'JavaScript:refreshPage(5000);' >тяло >
И накрая, дефинирайте функция с име „ опресни страница() ' с ' T ” като аргумент, който се отнася до зададеното време за автоматично опресняване на уеб страницата. „ location.reload() ” ще презареди страницата след определеното време:
функция refreshPage ( T ) {setTimeout ( 'location.reload(true);' , T ) ;
}
Изход
Метод 3: Автоматично опресняване на уеб страницата на всеки 5 секунди в JavaScript с помощта на метода setTimeout().
„ setTimeout() ” методът извиква функция след определено зададено време. Този метод може да се приложи за презареждане на уеб страница след определено време за изчакване.
Синтаксис
setTimeout ( функция, милисекунди, пар1, пар2 )В дадения синтаксис „ функция ” се отнася до функцията, до която трябва да се осъществи достъп, „ милисекунди ” е конкретният интервал от време за изпълнение, а „ двойка 1 ”, “ пар2 ” са допълнителните параметри.
Пример
В тага на скрипта на HTML страницата приложете „ setTimeout() ” по такъв начин, когато изминат 5 секунди, методът location.reload() презарежда уеб страницата:
< сценарий >setTimeout ( 'location.reload(true);' , 5000 ) ;
сценарий >
Изход
Обсъдихме всички удобни методи за автоматично опресняване на уеб страница на всеки 5 секунди с помощта на JavaScript.
Заключение
За автоматично опресняване на уеб страница на всеки 5 секунди с помощта на JavaScript, използвайте „ setInterval() ' и ' document.querySelector() ” методи за регулиране на стойността на таймера, опресни () ” за опресняване на уеб страница или „ setTimeout() ” метод за задаване на конкретно ограничение за изчакване за опресняване на уеб страница. Тази статия демонстрира методите за автоматично опресняване на уеб страница на всеки 5 секунди с помощта на JavaScript.