ஜாவாஸ்கிரிப்டில் SetInterval என்றால் என்ன, அது எவ்வாறு இயங்குகிறது?



ஜாவாஸ்கிரிப்ட் செயல்பாடுகளையும், நேரத்தைப் பொறுத்து முறைகளையும் செயல்படுத்த அனுமதிக்கிறது. ஜாவாஸ்கிரிப்டில் உள்ள செட் இன்டர்வெல் நேர நிகழ்வுகளின் ஒரு பகுதியாகும்.

ஜாவாஸ்கிரிப்ட் ஒரு கிளையன்ட் பக்க நிரலாக்க மொழியாகவும் சேவையக பக்க நிரலாக்க மொழியாகவும் பயன்படுத்தப்படுகிறது. அதுபல செயல்பாடுகளை எளிதில் செய்ய பல முறைகளை வழங்குகிறது. இதுதான் உருவாக்கப்பட்டது மிகவும் பிரபலமான நிரலாக்க மொழிகளில் ஒன்றாகும், மேலும் இது பல வகையான தயாரிப்பு வளர்ச்சியிலும் பரவலாகப் பயன்படுத்தப்படுகிறது.ஜாவாஸ்கிரிப்டில் உள்ள செட் இன்டர்வெல் என்பது ஜாவாஸ்கிரிப்ட்டில் நேர நிகழ்வுகளின் ஒரு பகுதியாகும், அதைப் பற்றி பின்வரும் வரிசையில் கற்றுக்கொள்வோம்:

ஹடூப் கற்றுக்கொள்வது எளிது

நேர நிகழ்வுகள்

ஜாவாஸ்கிரிப்ட் செயல்படுத்த அனுமதிக்கிறது செயல்பாடுகள் அத்துடன் நேரத்தைப் பொறுத்து முறைகள் மற்றும் திட்டத்தின் செயல்பாட்டு நேரம் அல்ல. நிரலின் செயல்பாட்டின் நேரத்தைப் பொருட்படுத்தாமல் குறிப்பிட்ட நேரத்தில் செயல்பாடுகளை செயல்படுத்த இது அனுமதிக்கிறது.





ஜாவாஸ்கிரிப்டில் நேர நிகழ்வுகளைப் பயன்படுத்துவதற்கான இரண்டு முக்கிய முறைகள்:

  • setTimeout (செயல்பாடு, மில்லி விநாடி)



இந்த செயல்பாடு மில்லி விநாடிகளில் குறிப்பிட்ட நேரத்திற்குப் பிறகு ஒரு முறை மட்டுமே அளவுருவாக அனுப்பப்படும் செயல்பாட்டை செயல்படுத்துகிறது.

  • setInterval (செயல்பாடு, மில்லி விநாடி)

இந்த செயல்பாடு செயல்பாட்டு நேரத்திலிருந்து செயல்பாட்டை இயக்குகிறது மற்றும் ஒவ்வொரு நேர இடைவெளியையும் அடைந்த பிறகு. இது ஒவ்வொரு நேர இடைவெளியிலும் செயல்பாட்டு செயல்பாட்டை மீண்டும் செய்கிறது.



இப்போது நாம் செல்லலாம் மற்றும் ஜாவாஸ்கிரிப்டில் SetInterval எவ்வாறு செயல்படுகிறது என்பதைப் பார்ப்போம்.

ஜாவாஸ்கிரிப்டில் செட் இன்டர்வெல்

இந்த செயல்பாட்டின் முதல் அளவுரு செயல்படுத்தப்பட வேண்டிய செயல்பாடு மற்றும் இரண்டாவது அளவுரு ஒவ்வொரு செயலாக்கத்திற்கும் இடையிலான நேர இடைவெளியைக் குறிக்கிறது.

var myVar = setInterval (myTimer, 1000) function myTimer () {var d = new date () document.getElementById ('demo'). உள் HTML = d.toLocaleTimeString ()}

இங்கே, document.getElementById இலிருந்து உறுப்பு பெறுகிறது இது ஐடியை 'டெமோ' மற்றும் d.toLocaleTimeString () செயல்பாடு கணினியிலிருந்து தற்போதைய நேரத்தைக் கொடுக்கும்.

எனவே, இது 1 வினாடிக்கு சமமான ஒவ்வொரு 1000 மில்லி விநாடிகளிலும் மீண்டும் மீண்டும் செய்யப்படுகிறது. இதனால், ஒவ்வொரு 1 விநாடிக்கும் இந்த செயல்பாடு மீண்டும் மீண்டும் செயல்படுத்தப்படுகிறது, எனவே நேரம் ஒவ்வொரு நொடியும் புதுப்பிக்கப்படுகிறது.

இந்த மரணதண்டனை எவ்வாறு நிறுத்துவது? நாம் கண்டுபிடிக்கலாம்!

மரணதண்டனை நிறுத்துவது எப்படி?

தெளிவான இன்டர்வல் () எனப்படும் மற்றொரு செயல்பாட்டின் உதவியுடன் setInterval () செயல்பாட்டிலிருந்து மரணதண்டனை நிறுத்தலாம்.clearInterval () setInterval () செயல்பாட்டிலிருந்து திரும்பிய மாறியைப் பயன்படுத்துகிறது.

உதாரணத்திற்கு:

myVar = setInterval (செயல்பாடு, மில்லி விநாடிகள்) clearInterval (myVar)

செட் இன்டர்வல் () மற்றும் தெளிவான இன்டர்வெல் () இரண்டையும் பயன்படுத்தும் ஒரு எடுத்துக்காட்டு கீழே. இது ஒரு கடிகாரத்தைத் தொடங்கி நேரத்தை நிறுத்த ஒரு பொத்தானை வழங்குகிறது.

 

கீழே ஒரு கடிகாரம் உள்ளது.

நேரத்தை நிறுத்துங்கள்

நேரத்தை நிறுத்த மேலே உள்ள பொத்தானைக் கிளிக் செய்க.

var myVar = setInterval (myTimer, 1000) function myTimer () {var d = new date () document.getElementById ('demo'). உள் HTML = d.toLocaleTimeString ()}

வெளியீடு:

வெளியீடு - ஜாவாஸ்கிரிப்டில் செட்டின்டெர்வால் - எடுரேகா

SetInterval () மற்றும் clearInterval () உடன் இன்னும் சில எடுத்துக்காட்டுகள்.

டைனமிக் முன்னேற்றப் பட்டியை உருவாக்குதல்

#myProgress {அகலம்: 100% உயரம்: 30px நிலை: உறவினர் பின்னணி-வண்ணம்: #ddd} #myBar {பின்னணி-வண்ணம்: # 4CAF50 அகலம்: 10px உயரம்: 30px நிலை: முழுமையான} 
கிளிக் செய் செயல்பாடு () {var elem = document.getElementById ('myBar') var width = 0 var id = setInterval (frame, 10) function frame () {if (width == 100) {clearInterval (id)} else {அகலம் ++ elem.style.width = அகலம் + '%'}}}

வெளியீடு:

ஆரம்ப வெளியீடு

'என்னைக் கிளிக் செய்க' என்று கூறும் பொத்தானைக் கிளிக் செய்த பிறகு வெளியீடு.

இரண்டு பின்னணிக்கு இடையில் நிலைமாற்று

மாறுவதை நிறுத்து var myVar = setInterval (setColor, 300) செயல்பாடு setColor () {var x = document.body x.style.backgroundColor = x.style.backgroundColor == 'மஞ்சள்'? 'இளஞ்சிவப்பு': 'மஞ்சள்'} செயல்பாடு நிறுத்த நிறம் () {clearInterval (myVar)}

வெளியீடு:

மஞ்சள் மற்றும் இளஞ்சிவப்பு நிறங்களுக்கு இடையில் நிறம் மாற்றப்படும். மேலே உள்ள வெளியீடு பொத்தானைக் கிளிக் செய்வதற்கு முன் மற்றும் கீழே உள்ள பொத்தானைக் கிளிக் செய்த பிறகு.

இதன் மூலம், ஜாவாஸ்கிரிப்ட் கட்டுரையில் எங்கள் செட் இன்டர்வலின் முடிவுக்கு வந்துள்ளோம். SetInterval முறை எவ்வாறு செயல்படுகிறது என்பதை நீங்கள் புரிந்து கொண்டீர்கள் என்று நம்புகிறேன்.

பாருங்கள் வழங்கியவர் எடுரேகா. HTML5, CSS3, Twitter பூட்ஸ்டார்ப் 3, jQuery மற்றும் Google API களைப் பயன்படுத்தி ஈர்க்கக்கூடிய வலைத்தளங்களை எவ்வாறு உருவாக்குவது மற்றும் அமேசான் எளிய சேமிப்பக சேவைக்கு (S3) பயன்படுத்துவது எப்படி என்பதை அறிய வலை அபிவிருத்தி சான்றிதழ் பயிற்சி உங்களுக்கு உதவும்.

c ++ வரிசை வரிசையை ஏறுவரிசையில் வரிசைப்படுத்துகிறது

எங்களுக்கு ஒரு கேள்வி கிடைத்ததா? தயவுசெய்து இந்த வலைப்பதிவின் கருத்துகள் பிரிவில் குறிப்பிடவும், நாங்கள் உங்களிடம் திரும்புவோம்.