W JavaScript zdarzają się sytuacje, w których musimy zadbać o to, aby wpisana treść na danej stronie była dokładna i aktualna. Na przykład wymagane jest wyświetlanie najnowszych treści na stronie internetowej podczas wypełniania długiego formularza i obserwowania nowych zmian lub gdy chcesz przetestować stronę internetową. W takich przypadkach automatyczne odświeżanie strony internetowej co 5 sekund za pomocą JavaScript jest bardzo pomocne w radzeniu sobie z tego typu sytuacjami.
W tym artykule omówimy metody automatycznego odświeżania strony internetowej co 5 sekund za pomocą JavaScript.
Jak automatycznie odświeżać stronę internetową co 5 sekund przy użyciu JavaScript?
Aby automatycznie odświeżać stronę internetową co 5 sekund za pomocą JavaScript, można zastosować następujące podejścia:
- “ setInterval() ' oraz ' document.querySelector() ” metody
- “ odświeżać() ' metoda
- “ setTimeout() ' metoda
Przejrzyj omówione metody jeden po drugim!
Metoda 1: Automatyczne odświeżanie strony internetowej co 5 sekund w JavaScript za pomocą metod setInterval() i document.querySelector()
„ setInterval() Metoda ” uzyskuje dostęp do funkcji w określonym przedziale czasu, a „ document.querySelector() Metoda ” pobiera pierwszy element pasujący do selektora CSS. Metody te mogą być używane w połączeniu, aby uzyskać dostęp do określonego tagu nagłówka i ustawić interwał czasowy zgodnie z wymaganą funkcjonalnością za pomocą timera.
Składnia
ustaw interwał ( funkcja, milisekundy, par1, par2 )W powyższej składni „ funkcjonować ” odnosi się do funkcji, do której należy uzyskać dostęp, „ milisekundy ” to określony przedział czasu do wykonania, a „ para 1 ' oraz ' par2 ” to dodatkowe parametry.
dokument. selektor zapytań ( CSS selektory )
Tutaj, ' Selektory CSS ” reprezentują co najmniej jeden selektor CSS.
Sprawdź poniższy przykład.
Przykład
Najpierw określ tytuł i nagłówek odpowiednio w znacznikach
:
< tytuł > Odśwież stronę co 5 sekund < / tytuł >
< h2 styl = 'wyrównanie tekstu: do lewej' > Automatyczne odświeżanie strony < / h2 >
Teraz ustaw wartość timera jako „ 1 ”:
niech minutnik = 1 ;Następnie zastosuj „ setInterval() ” metoda z „ 1000ms ' wartość. Spowoduje to zwiększenie licznika co sekundę. Uzyskaj również dostęp do określonego nagłówka, aby wyświetlić go na „ Obiektowy model dokumentu (DOM) ” po zakończeniu ustawionej wartości timera.
Na koniec iteruj wartość timera z przyrostem „ 1 ' za pomocą ' ++ ” post-inkrementacji i zastosować warunek w taki sposób, że jeśli wartość przekroczy 5, „ lokalizacja.reload() ” spowoduje ponowne załadowanie okna:
ustaw interwał ( ( ) => {dokument. selektor zapytań ( „h2” ) . tekst wewnętrzny = regulator czasowy ;
regulator czasowy ++;
jeśli ( regulator czasowy > 5 )
Lokalizacja. przeładować ( ) ;
} , 1000 ) ;
Widać, że nasza strona internetowa automatycznie odświeża się co pięć sekund:
Metoda 2: Automatyczne odświeżanie strony internetowej co 5 sekund w JavaScript przy użyciu zdarzenia onload
„ onload ” zdarzenie jest wyzwalane po załadowaniu obiektu. Ta technika może zostać zaimplementowana w celu odświeżenia strony za pomocą funkcji zdefiniowanej przez użytkownika podczas ładowania strony internetowej.
Składnia
obiekt. onload = Odśwież stronę ( ) { myScript } ;W podanej składni „ funkcjonować ” odnosi się do funkcji, którą należy wywołać podczas ładowania obiektu.
Spójrz na następujący przykład.
Przykład
Najpierw dołącz tytuł i nagłówek, jak omówiono w poprzedniej metodzie:
< tytuł > Odśwież stronę co 5 sekund < / tytuł >< h2 > Automatyczne odświeżanie strony < / h2 >
Teraz zastosuj „ onload ” zdarzenie i wywołaj funkcję “ Odśwież stronę() ” i zdaj” 5000 ” jako argument wskazujący pięciosekundowy przedział czasu:
< obciążenie ciała = 'JavaScript:refreshPage(5000);' >ciało >
Na koniec zdefiniuj funkcję o nazwie „ Odśwież stronę() ' z ' t ” jako argument, który odnosi się do ustawionego czasu automatycznego odświeżania strony internetowej. „ lokalizacja.reload() ” metoda przeładuje stronę po określonym czasie:
funkcja odświeżania strony ( t ) {setTimeout ( 'lokalizacja.reload(prawda);' , t ) ;
}
Wyjście
Metoda 3: Automatyczne odświeżanie strony internetowej co 5 sekund w JavaScript za pomocą metody setTimeout()
„ setTimeout() Metoda ” wywołuje funkcję po określonym czasie. Tę metodę można zastosować do ponownego załadowania strony internetowej po określonym czasie oczekiwania.
Składnia
setTimeout ( funkcja, milisekundy, par1, par2 )W podanej składni „ funkcjonować ” odnosi się do funkcji, do której należy uzyskać dostęp, „ milisekundy ” to określony przedział czasu do wykonania, a „ para 1 ”, „ par2 ” to dodatkowe parametry.
Przykład
W tagu skryptu strony HTML zastosuj „ setTimeout() ” w ten sposób po upływie 5 sekund metoda location.reload() przeładowuje stronę internetową:
< scenariusz >setTimeout ( 'lokalizacja.reload(prawda);' , 5000 ) ;
scenariusz >
Wyjście
Omówiliśmy wszystkie wygodne metody automatycznego odświeżania strony internetowej co 5 sekund za pomocą JavaScript.
Wniosek
Aby automatycznie odświeżać stronę internetową co 5 sekund za pomocą JavaScript, użyj „ setInterval() ' oraz ' document.querySelector() ” metody regulacji wartości timera, „ odświeżać() ” metoda odświeżania strony internetowej lub „ setTimeout() ” metoda ustawiania określonego limitu czasu odświeżania strony internetowej. W tym artykule przedstawiono metody automatycznego odświeżania strony internetowej co 5 sekund za pomocą JavaScript.