I JavaScript er det situasjoner hvor vi må sikre at det angitte innholdet på et bestemt nettsted er nøyaktig og oppdatert. For eksempel er det nødvendig å vise det nyeste innholdet på en nettside mens du fyller ut et langt skjema og observerer de nye endringene eller når du vil teste et nettsted. I slike tilfeller er automatisk oppdatering av en nettside hvert 5. sekund ved hjelp av JavaScript svært nyttig for å takle denne typen situasjoner.
Denne artikkelen vil diskutere metodene for å automatisk oppdatere en nettside hvert 5. sekund ved hjelp av JavaScript.
Hvordan oppdatere nettsiden automatisk hvert 5. sekund ved å bruke JavaScript?
For å automatisk oppdatere en nettside hvert 5. sekund ved hjelp av JavaScript, kan følgende tilnærminger brukes:
- ' setInterval() ' og ' document.querySelector() 'metoder
- ' forfriske() 'metoden
- ' setTimeout() 'metoden
Gå gjennom de diskuterte metodene én etter én!
Metode 1: Oppdater webside automatisk hvert 5. sekund i JavaScript ved å bruke metodene setInterval() og document.querySelector()
« setInterval() '-metoden får tilgang til en funksjon med et spesifisert tidsintervall og ' document.querySelector() ”-metoden får det første elementet som samsvarer med en CSS-velger. Disse metodene kan brukes i kombinasjon for å få tilgang til den spesifikke overskriftskoden og stille inn tidsintervallet til en nødvendig funksjonalitet ved hjelp av en tidtaker.
Syntaks
settintervall ( funksjon, millisekunder, par1, par2 )I syntaksen ovenfor, ' funksjon ' refererer til funksjonen som må åpnes, ' millisekunder ' er det spesifikke tidsintervallet som skal utføres, og ' par 1 ' og ' par2 ” er tilleggsparametrene.
dokument. querySelector ( CSS velgere )
Her, ' CSS-velgere ” representerer én eller flere CSS-velgere.
Sjekk ut følgende eksempel.
Eksempel
Først spesifiser en tittel og en overskrift i henholdsvis
-taggene:
< tittel > Oppdater siden hvert 5. sekund < / tittel >
< h2 stil = 'tekstjustering: venstre' > Oppdater siden automatisk < / h2 >
Sett nå en tidtakerverdi som ' 1 ':
la timer = 1 ;Etter det bruker du ' setInterval() ' metode med en ' 1000 ms 'verdi. Dette vil øke timeren hvert sekund. Få også tilgang til den angitte overskriften for å vise den på ' Document Object Model (DOM) ” ved slutten av den innstilte timerverdien.
Til slutt, gjenta verdien av timeren med økningen på ' 1 ' ved hjelp av ' ++ ” post-increment operator og bruk en betingelse på en slik måte at hvis verdien overstiger 5, location.reload() ”-metoden vil resultere i omlasting av vinduet:
settintervall ( ( ) => {dokument. querySelector ( 'h2' ) . indreTekst = tidtaker ;
tidtaker ++;
hvis ( tidtaker > 5 )
plassering. last på nytt ( ) ;
} , 1000 ) ;
Det kan sees at nettsiden vår oppdateres automatisk hvert femte sekund:
Metode 2: Oppdater webside automatisk hvert 5. sekund i JavaScript ved å bruke onload-hendelse
« på Last ”-hendelsen utløses når et objekt er lastet inn. Denne teknikken kan implementeres for å oppdatere siden ved hjelp av en brukerdefinert funksjon når nettsiden er lastet.
Syntaks
gjenstand. på Last = Oppdater side ( ) { myScript } ;I den gitte syntaksen, ' funksjon ” refererer til funksjonen som må startes når objektet lastes.
Se på følgende eksempel.
Eksempel
Ta først med en tittel og overskrift som diskutert i forrige metode:
< tittel > Oppdater siden hvert 5. sekund < / tittel >< h2 > Oppdater siden automatisk < / h2 >
Bruk nå ' på Last ' hendelse og påkalle funksjonen ' Oppdater side() 'og pass' 5000 ' som argument som indikerer fem sekunders tidsintervall:
< kroppsbelastning = 'JavaScript:refreshPage(5000);' >kropp >
Til slutt, definer en funksjon kalt ' Oppdater side() ' med ' t ” som et argument som refererer til den angitte tiden for automatisk oppdatering av nettsiden. « location.reload() ”-metoden vil laste inn siden på nytt etter den angitte tiden:
funksjon refreshPage ( t ) {setTimeout ( 'location.reload(true);' , t ) ;
}
Produksjon
Metode 3: Oppdater webside automatisk hvert 5. sekund i JavaScript ved hjelp av setTimeout()-metoden
« setTimeout() ”-metoden påkaller en funksjon etter en angitt angitt tid. Denne metoden kan brukes for å laste inn en nettside på nytt etter et bestemt tidsavbrudd.
Syntaks
setTimeout ( funksjon, millisekunder, par1, par2 )I den gitte syntaksen, ' funksjon ' refererer til funksjonen som skal åpnes, ' millisekunder ' er det spesifikke tidsintervallet som skal utføres, og ' par 1 ', ' par2 ” er tilleggsparametrene.
Eksempel
I skriptkoden til HTML-siden bruker du ' setTimeout() ”-metoden på en slik måte når det går 5 sekunder, laster location.reload()-metoden inn nettsiden på nytt:
< manus >setTimeout ( 'location.reload(true);' , 5000 ) ;
manus >
Produksjon
Vi har diskutert alle praktiske metoder for å automatisk oppdatere en nettside hvert 5. sekund ved hjelp av JavaScript.
Konklusjon
For å automatisk oppdatere en nettside hvert 5. sekund med JavaScript, bruk ' setInterval() ' og ' document.querySelector() ' metoder for å justere tidtakerverdien, ' forfriske() '-metoden for å oppdatere en nettside, eller ' setTimeout() ” metode for å angi en spesifikk tidsavbruddsoppdateringsgrense for en nettside. Denne artikkelen demonstrerte metodene for å automatisk oppdatere en nettside hvert 5. sekund ved hjelp av JavaScript.