„JavaScript“ yra situacijų, kai turime užtikrinti, kad konkrečioje svetainėje įvestas turinys būtų tikslus ir atnaujintas. Pavyzdžiui, pildant ilgą formą ir stebint naujus pakeitimus arba norint išbandyti svetainę, reikia pateikti naujausią tinklalapio turinį. Tokiais atvejais automatinis tinklalapio atnaujinimas kas 5 sekundes naudojant JavaScript labai padeda susidoroti su tokiomis situacijomis.
Šiame straipsnyje bus aptariami būdai, kaip automatiškai atnaujinti tinklalapį kas 5 sekundes naudojant JavaScript.
Kaip automatiškai atnaujinti tinklalapį kas 5 sekundes naudojant „JavaScript“?
Norint automatiškai atnaujinti tinklalapį kas 5 sekundes naudojant JavaScript, galima naudoti šiuos metodus:
- “ setInterval() “ ir „ document.querySelector() “ metodai
- “ atnaujinti () “ metodas
- “ setTimeout() “ metodas
Peržvelkite aptartus metodus po vieną!
1 būdas: automatinis tinklalapio atnaujinimas kas 5 sekundes JavaScript naudojant setInterval() ir document.querySelector() metodus
„ setInterval() ' metodas pasiekia funkciją nurodytu laiko intervalu ir ' document.querySelector() “ metodas gauna pirmąjį elementą, atitinkantį CSS parinkiklį. Šie metodai gali būti naudojami kartu, norint pasiekti konkrečią antraštės žymą ir nustatyti laiko intervalą iki reikiamos funkcijos naudojant laikmatį.
Sintaksė
setInterval ( funkcija, milisekundės, par1, par2 )Aukščiau pateiktoje sintaksėje „ funkcija “ reiškia funkciją, kurią reikia pasiekti, “ milisekundės “ yra konkretus laiko intervalas, kurį reikia vykdyti, ir „ pora 1 “ ir „ par2 “ yra papildomi parametrai.
dokumentas. querySelector ( CSS selektoriai )
Čia, ' CSS parinkikliai “ reiškia vieną ar daugiau nei vieną CSS parinkiklį.
Peržiūrėkite toliau pateiktą pavyzdį.
Pavyzdys
Pirmiausia nurodykite pavadinimą ir antraštę atitinkamai
žymose:
< titulą > Puslapis atnaujinamas kas 5 sekundes < / titulą >
< h2 stilius = 'text-align: left' > Automatinis puslapio atnaujinimas < / h2 >
Dabar nustatykite laikmačio reikšmę kaip ' 1 “:
tegul laikmatis = 1 ;Po to pritaikykite „ setInterval() ' metodas su ' 1000 ms “ vertė. Tai padidins laikmatį kas sekundę. Taip pat pasiekite nurodytą antraštę, kad ji būtų rodoma „ Dokumento objekto modelis (DOM) “ pasibaigus nustatytai laikmačio vertei.
Galiausiai pakartokite laikmačio reikšmę, padidindami „ 1 “ naudojant “ ++ “ operaciją po prieaugio ir taikykite sąlygą taip, kad jei vertė viršija 5, „ location.reload() “ metodas lems lango įkėlimą iš naujo:
setInterval ( ( ) => {dokumentas. querySelector ( 'h2' ) . vidinisTekstas = laikmatis ;
laikmatis ++;
jeigu ( laikmatis > 5 )
vieta. perkrauti ( ) ;
} , 1000 ) ;
Matyti, kad mūsų tinklalapis automatiškai atnaujinamas kas penkias sekundes:
2 būdas: Automatiškai atnaujinkite tinklalapį kas 5 sekundes JavaScript naudojant įkėlimo įvykį
„ įkėlimas “ įvykis suaktyvinamas, kai objektas įkeliamas. Ši technika gali būti įdiegta norint atnaujinti puslapį naudojant vartotojo apibrėžtą funkciją, kai tinklalapis įkeliamas.
Sintaksė
objektas. įkėlimas = atnaujinimo puslapį ( ) { myScript } ;Pateiktoje sintaksėje „ funkcija “ reiškia funkciją, kurią reikia iškviesti, kai objektas įkeliamas.
Pažvelkite į šį pavyzdį.
Pavyzdys
Pirma, įtraukite pavadinimą ir antraštę, kaip aptarta ankstesniame metode:
< titulą > Puslapis atnaujinamas kas 5 sekundes < / titulą >< h2 > Automatinis puslapio atnaujinimas < / h2 >
Dabar pritaikykite „ įkėlimas 'įvykį ir iškviesti funkciją' refreshPage () “ ir praeiti“ 5000 “ kaip argumentą, kuris nurodo penkių sekundžių laiko intervalą:
< kūno apkrova = 'JavaScript:refreshPage(5000);' >kūnas >
Galiausiai apibrėžkite funkciją pavadinimu ' atnaujinimas () ' su ' t “ kaip argumentą, nurodantį nustatytą automatinio tinklalapio atnaujinimo laiką. „ location.reload() “ metodas iš naujo įkels puslapį po nurodyto laiko:
funkcija refreshPage ( t ) {setTimeout ( 'location.reload(true);' , t ) ;
}
Išvestis
3 būdas: automatinis tinklalapio atnaujinimas kas 5 sekundes JavaScript naudojant setTimeout() metodą
„ setTimeout() “ metodas iškviečia funkciją po nurodyto nustatyto laiko. Šis metodas gali būti taikomas norint iš naujo įkelti tinklalapį po tam tikro nustatyto laiko.
Sintaksė
setTimeout ( funkcija, milisekundės, par1, par2 )Pateiktoje sintaksėje „ funkcija “ reiškia funkciją, kurią reikia pasiekti, “ milisekundės “ yra konkretus laiko intervalas, kurį reikia vykdyti, ir „ pora 1 “, „ par2 “ yra papildomi parametrai.
Pavyzdys
HTML puslapio scenarijaus žymoje pritaikykite „ setTimeout() “ metodą tokiu būdu, kai praeina 5 sekundės, metodas location.reload() iš naujo įkelia tinklalapį:
< scenarijus >setTimeout ( 'location.reload(true);' , 5000 ) ;
scenarijus >
Išvestis
Aptarėme visus patogius būdus, kaip automatiškai atnaujinti tinklalapį kas 5 sekundes naudojant JavaScript.
Išvada
Norėdami automatiškai atnaujinti tinklalapį kas 5 sekundes naudodami „JavaScript“, naudokite „ setInterval() “ ir „ document.querySelector() “ metodus, kaip koreguoti laikmačio reikšmę, “ atnaujinti () ' metodas, skirtas atnaujinti tinklalapį, arba ' setTimeout() “ metodas, leidžiantis nustatyti konkretų tinklalapio skirtojo laiko atnaujinimo limitą. Šiame straipsnyje parodyta, kaip automatiškai atnaujinti tinklalapį kas 5 sekundes naudojant JavaScript.