జావాస్క్రిప్ట్లో, నిర్దిష్ట సైట్లో నమోదు చేయబడిన కంటెంట్ ఖచ్చితమైనదని మరియు తాజాగా ఉందని మేము నిర్ధారించుకోవాల్సిన సందర్భాలు ఉన్నాయి. ఉదాహరణకు, సుదీర్ఘమైన ఫారమ్ను పూరించేటప్పుడు మరియు కొత్త మార్పులను గమనిస్తున్నప్పుడు లేదా మీరు వెబ్సైట్ను పరీక్షించాలనుకున్నప్పుడు వెబ్ పేజీలో ఇటీవలి కంటెంట్ను ప్రదర్శించడం అవసరం. అటువంటి సందర్భాలలో, JavaScriptని ఉపయోగించి ప్రతి 5 సెకన్లకు ఒక వెబ్ పేజీని స్వయంచాలకంగా రిఫ్రెష్ చేయడం ఈ రకమైన పరిస్థితులను ఎదుర్కోవడంలో చాలా సహాయకారిగా ఉంటుంది.
ఈ వ్యాసం JavaScriptని ఉపయోగించి ప్రతి 5 సెకన్లకు ఒక వెబ్ పేజీని స్వయంచాలకంగా రిఫ్రెష్ చేసే పద్ధతులను చర్చిస్తుంది.
జావాస్క్రిప్ట్ని ఉపయోగించి ప్రతి 5 సెకన్లకు వెబ్ పేజీని ఆటో రిఫ్రెష్ చేయడం ఎలా?
జావాస్క్రిప్ట్ని ఉపయోగించి ప్రతి 5 సెకన్లకు ఒక వెబ్ పేజీని స్వయంచాలకంగా రిఫ్రెష్ చేయడానికి, ఈ క్రింది విధానాలను ఉపయోగించవచ్చు:
- ' విరామం () 'మరియు' document.querySelector() ” పద్ధతులు
- ' రిఫ్రెష్ () ” పద్ధతి
- ' సెట్ టైమౌట్() ” పద్ధతి
చర్చించిన పద్ధతులను ఒక్కొక్కటిగా పరిశీలించండి!
విధానం 1: setInterval() మరియు document.querySelector() పద్ధతులను ఉపయోగించి జావాస్క్రిప్ట్లో ప్రతి 5 సెకన్లకు వెబ్ పేజీని స్వయంచాలకంగా రిఫ్రెష్ చేయండి
ది ' విరామం () 'పద్ధతి నిర్దిష్ట సమయ వ్యవధిలో ఫంక్షన్ను యాక్సెస్ చేస్తుంది మరియు ' document.querySelector() ” పద్ధతి CSS సెలెక్టర్కు సరిపోలే మొదటి మూలకాన్ని పొందుతుంది. నిర్దిష్ట శీర్షిక ట్యాగ్ని యాక్సెస్ చేయడానికి మరియు టైమర్ సహాయంతో అవసరమైన కార్యాచరణకు సమయ విరామాన్ని సెట్ చేయడానికి ఈ పద్ధతులను కలిపి ఉపయోగించవచ్చు.
వాక్యనిర్మాణం
సెట్ ఇంటర్వెల్ ( ఫంక్షన్, మిల్లీసెకన్లు, par1, par2 )పై వాక్యనిర్మాణంలో, “ ఫంక్షన్ ” యాక్సెస్ చేయవలసిన ఫంక్షన్ని సూచిస్తుంది, “ మిల్లీసెకన్లు ” అనేది అమలు చేయడానికి నిర్దిష్ట సమయ విరామం, మరియు “ జత 1 'మరియు' పార్ 2 ” అనేవి అదనపు పారామితులు.
పత్రం. querySelector ( CSS సెలెక్టర్లు )
ఇక్కడ, ' CSS సెలెక్టర్లు ” ఒకటి లేదా ఒకటి కంటే ఎక్కువ CSS సెలెక్టర్లను సూచిస్తుంది.
కింది ఉదాహరణను పరిశీలించండి.
ఉదాహరణ
ముందుగా,
ట్యాగ్లలో వరుసగా శీర్షిక మరియు శీర్షికను పేర్కొనండి:
< శీర్షిక > ప్రతి 5 సెకన్లకు పేజీని రిఫ్రెష్ చేయండి < / శీర్షిక >
< h2 శైలి = 'టెక్స్ట్-అలైన్: ఎడమ' > పేజీని స్వయంచాలకంగా రిఫ్రెష్ చేయండి < / h2 >
ఇప్పుడు, టైమర్ విలువను ఇలా సెట్ చేయండి 1 ”:
టైమర్ని అనుమతించండి = 1 ;ఆ తరువాత, వర్తించు ' విరామం () 'ఒక' తో పద్ధతి 1000ms ' విలువ. ఇది ప్రతి సెకనుకు టైమర్ను పెంచుతుంది. అలాగే, 'పై ప్రదర్శించడానికి పేర్కొన్న శీర్షికను యాక్సెస్ చేయండి డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్(DOM) సెట్ టైమర్ విలువ ముగింపులో.
చివరగా, '' పెరుగుదలతో టైమర్ విలువను పునరావృతం చేయండి 1 'ఉపయోగించి' ++ 'పోస్ట్-ఇంక్రిమెంట్ ఆపరేటర్ మరియు విలువ 5 కంటే ఎక్కువగా ఉంటే, '' షరతును వర్తింపజేయండి location.reload() ”పద్ధతి విండోను మళ్లీ లోడ్ చేస్తుంది:
సెట్ ఇంటర్వెల్ ( ( ) => {పత్రం. querySelector ( 'h2' ) . అంతర్గత వచనం = టైమర్ ;
టైమర్ ++;
ఉంటే ( టైమర్ > 5 )
స్థానం. మళ్లీ లోడ్ చేయండి ( ) ;
} , 1000 ) ;
మా వెబ్ పేజీ ప్రతి ఐదు సెకన్లకు స్వయంచాలకంగా రిఫ్రెష్ అవుతుందని చూడవచ్చు:
విధానం 2: ఆన్లోడ్ ఈవెంట్ని ఉపయోగించి జావాస్క్రిప్ట్లో ప్రతి 5 సెకన్లకు వెబ్ పేజీని స్వయంచాలకంగా రిఫ్రెష్ చేయండి
ది ' ఆన్లోడ్ ”ఒక వస్తువు లోడ్ అయినప్పుడు ఈవెంట్ ట్రిగ్గర్ చేయబడుతుంది. వెబ్ పేజీ లోడ్ అయినప్పుడు వినియోగదారు నిర్వచించిన ఫంక్షన్ సహాయంతో పేజీని రిఫ్రెష్ చేయడానికి ఈ సాంకేతికతను అమలు చేయవచ్చు.
వాక్యనిర్మాణం
వస్తువు. ఆన్లోడ్ = రిఫ్రెష్ పేజీ ( ) { నా స్క్రిప్ట్ } ;ఇచ్చిన సింటాక్స్లో, “ ఫంక్షన్ ”ఆబ్జెక్ట్ లోడ్ అయినప్పుడు అమలు చేయాల్సిన ఫంక్షన్ని సూచిస్తుంది.
కింది ఉదాహరణ చూడండి.
ఉదాహరణ
ముందుగా, మునుపటి పద్ధతిలో చర్చించిన విధంగా శీర్షిక మరియు శీర్షికను చేర్చండి:
< శీర్షిక > ప్రతి 5 సెకన్లకు పేజీని రిఫ్రెష్ చేయండి < / శీర్షిక >< h2 > పేజీని స్వయంచాలకంగా రిఫ్రెష్ చేయండి < / h2 >
ఇప్పుడు, వర్తించు ' ఆన్లోడ్ 'ఈవెంట్ మరియు ఫంక్షన్ను ప్రారంభించండి' రిఫ్రెష్ పేజీ() 'మరియు పాస్' 5000 ” ఐదు సెకన్ల సమయ విరామాన్ని సూచించే వాదనగా:
< శరీరం ఆన్లోడ్ = 'JavaScript:refreshPage(5000);' >శరీరం >
చివరగా, '' అనే ఫంక్షన్ను నిర్వచించండి రిఫ్రెష్ పేజీ() 'తో' t ” వెబ్ పేజీని స్వయంచాలకంగా రిఫ్రెష్ చేయడానికి సెట్ చేసిన సమయాన్ని సూచించే వాదనగా. ది ' location.reload() ” పద్ధతి పేర్కొన్న సమయం తర్వాత పేజీని మళ్లీ లోడ్ చేస్తుంది:
ఫంక్షన్ రిఫ్రెష్ పేజీ ( t ) {సమయం ముగిసింది ( 'location.reload(true);' , టి ) ;
}
అవుట్పుట్
విధానం 3: setTimeout() పద్ధతిని ఉపయోగించి జావాస్క్రిప్ట్లో ప్రతి 5 సెకన్లకు వెబ్ పేజీని స్వయంచాలకంగా రిఫ్రెష్ చేయండి
ది ' సెట్ టైమౌట్() ”పద్ధతి నిర్దిష్ట సెట్ సమయం తర్వాత ఒక ఫంక్షన్ను ప్రేరేపిస్తుంది. నిర్దిష్ట సెట్ సమయం ముగిసిన తర్వాత వెబ్ పేజీని రీలోడ్ చేయడానికి ఈ పద్ధతిని అన్వయించవచ్చు.
వాక్యనిర్మాణం
సమయం ముగిసింది ( ఫంక్షన్, మిల్లీసెకన్లు, par1, par2 )ఇచ్చిన సింటాక్స్లో, “ ఫంక్షన్ ” ప్రాప్తి చేయవలసిన ఫంక్షన్ని సూచిస్తుంది, “ మిల్లీసెకన్లు ” అనేది అమలు చేయడానికి నిర్దిష్ట సమయ విరామం, మరియు “ జత 1 ',' పార్ 2 ” అనేవి అదనపు పారామితులు.
ఉదాహరణ
HTML పేజీ యొక్క స్క్రిప్ట్ ట్యాగ్లో, “ని వర్తింపజేయండి సెట్ టైమౌట్() ” పద్ధతిలో 5 సెకన్లు గడిచినప్పుడు, location.reload() పద్ధతి వెబ్ పేజీని రీలోడ్ చేస్తుంది:
< స్క్రిప్ట్ >సమయం ముగిసింది ( 'location.reload(true);' , 5000 ) ;
స్క్రిప్ట్ >
అవుట్పుట్
JavaScriptని ఉపయోగించి ప్రతి 5 సెకన్లకు ఒక వెబ్ పేజీని స్వయంచాలకంగా రిఫ్రెష్ చేయడానికి మేము అన్ని అనుకూలమైన పద్ధతులను చర్చించాము.
ముగింపు
JavaScriptని ఉపయోగించి ప్రతి 5 సెకన్లకు ఒక వెబ్ పేజీని స్వయంచాలకంగా రిఫ్రెష్ చేయడానికి, 'ని ఉపయోగించండి విరామం () 'మరియు' document.querySelector() టైమర్ విలువను సర్దుబాటు చేసే పద్ధతులు, రిఫ్రెష్ () ” వెబ్ పేజీని రిఫ్రెష్ చేసే పద్ధతి లేదా “ సెట్ టైమౌట్() ” వెబ్ పేజీ యొక్క నిర్దిష్ట గడువు ముగిసిన రిఫ్రెష్ పరిమితిని సెట్ చేసే పద్ధతి. ఈ కథనం JavaScriptని ఉపయోగించి ప్రతి 5 సెకన్లకు ఒక వెబ్ పేజీని స్వయంచాలకంగా రిఫ్రెష్ చేసే పద్ధతులను ప్రదర్శించింది.