JavaScript காலக்கெடு நிகழ்வுகள்
காலக்கெடு நிகழ்வுகள் குறியீட்டை இயக்க உங்களை அனுமதிக்கின்றன:
- ஒரு தாமதத்திற்குப் பிறகு
- அல்லது மீண்டும் மீண்டும்
காலக்கெடு என்பது கணினி கடிகாரத்தால் உருவாக்கப்படும் காலக்கெடு நிகழ்வுகளால் இயக்கப்படுகிறது.
டைமர் செயல்பாடுகள்
| செயல்பாடு | விளக்கம் |
|---|---|
| setTimeout() | ஒரு கடிகார காலாவதியை அமைக்கிறது (ஒரு முறை இயங்கும்) |
| setInterval() | ஒரு கடிகார இடைவெளியை அமைக்கிறது (மீண்டும் மீண்டும் இயங்கும்) |
| clearTimeout() | ஒரு காலாவதியை அழிக்கிறது |
| clearInterval() | ஒரு இடைவெளியை அழிக்கிறது |
குறிப்பு:
டைமர் செயல்பாடுகள் window பொருளுக்கு சொந்தமானவை.
setTimeout() என்பது window.setTimeout() போன்றதே.
ஒரு கடிகாரம்
எடுத்துக்காட்டு
<p id="clock"></p>
<script>
// Call showTime every 1000 millisec
setInterval(showTime, 1000);
// Fuction to display the time
function showTime() {
const d = new Date();
document.getElementById("clock").innerHTML =
d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
}
</script>
நேரடி கடிகார ஆர்ப்பாட்டம்
JavaScript கடிகாரம்:
setInterval(showTime, 1000) ஒவ்வொரு 1000 மில்லி விநாடிகளிலும் (1 வினாடி) showTime செயல்பாட்டை அழைக்கிறது.
The setTimeout() முறை
setTimeout() முறை மில்லி விநாடிகளில் ஒரு தாமதத்திற்குப் பிறகு ஒரு செயல்பாட்டை இயக்குகிறது.
setTimeout(function, delay, p1,...,pN)
அளவுருக்கள்
| அளவுரு | விளக்கம் |
|---|---|
| function | தேவை. டைமர் காலாவதியானபோது அழைக்கப்பட வேண்டிய செயல்பாடு. |
| delay | விருப்ப. டைமர் காத்திருக்க வேண்டிய மில்லி விநாடிகள். இயல்புநிலை 0 (உடனடியாக). |
| p1,...,pN | விருப்ப. செயல்பாட்டிற்கு அனுப்பப்படும் வாதங்கள். |
திரும்பும் மதிப்பு
| வகை | விளக்கம் |
|---|---|
| முழு எண் | டைமரை தனித்துவமாக அடையாளம் காணும் ஒரு முழு எண். இந்த "காலாவதி ஐடி" பின்னர் clearTimeout() க்கு அனுப்பப்பட்டு டைமரை ரத்து செய்யலாம். |
எடுத்துக்காட்டு
<button id="btn">Start</button>
<p id="demo"></p>
<script>
// let btn listen for a click
document.getElementById("btn").addEventListener("click", function () {
// Then call showMsg after 2 seconds
setTimeout(showMsg, 2000);
});
// Function to display message
function showMsg() {
document.getElementById("demo").innerHTML = "Hello after 2 seconds!";
}
</script>
குறிப்பு:
setTimeout() முறை அசிங்க்ரோனஸ் JavaScript இன் முக்கிய பகுதியாகும், இது முக்கிய செயல்பாட்டு நூலைத் தடுக்காமல் குறியீட்டு இயக்கத்தை திட்டமிட அனுமதிக்கிறது.
setTimeout ஆர்ப்பாட்டம்
தாமத இயக்கம் சோதனை:
The setInterval() முறை
setInterval() முறை ஒரு செயல்பாட்டை மீண்டும் மீண்டும் அழைக்கிறது.
setInterval(function, delay, p1,...,pN)
அளவுருக்கள்
| அளவுரு | விளக்கம் |
|---|---|
| function | தேவை. ஒவ்வொரு இடைவெளிக்கும் அழைக்கப்பட வேண்டிய செயல்பாடு. |
| delay | விருப்ப. ஒவ்வொரு செயல்பாடு அழைப்புக்கும் இடையே உள்ள மில்லி விநாடிகள். இயல்புநிலை 0. |
| p1,...,pN | விருப்ப. செயல்பாட்டிற்கு அனுப்பப்படும் வாதங்கள். |
திரும்பும் மதிப்பு
| வகை | விளக்கம் |
|---|---|
| முழு எண் | டைமரை தனித்துவமாக அடையாளம் காணும் ஒரு முழு எண். இந்த "காலாவதி ஐடி" பின்னர் clearInterval() க்கு அனுப்பப்பட்டு டைமரை ரத்து செய்யலாம். |
எடுத்துக்காட்டு
setInterval() ஐ clearInterval() உடன் பயன்படுத்துதல்:
<button id="start">Start Counter</button>
<button id="stop">Stop</button>
<p id="counter">0</p>
<script>
let myInterval;
let count = 0;
const btnStart = document.getElementById("start");
const btnStop = document.getElementById("stop");
// let btnStart listen for a click
document.getElementById("start").addEventListener("click", function () {
// Then start counter
myInterval = setInterval(counter, 1000);
});
// let btnStop listen for a click
document.getElementById("stop").addEventListener("click", function () {
// Then stop counter
clearInterval(myInterval);
});
function counter() {
count++;
document.getElementById("counter").innerHTML = count;
}
</script>
குறிப்பு:
setTimeout() முறை ஒரு தாமதத்திற்குப் பிறகு ஒரு செயல்பாட்டை ஒரு முறை மட்டுமே இயக்குகிறது.
setInterval() முறை ஒவ்வொரு இடைவெளியிலும் ஒரு செயல்பாட்டை மீண்டும் மீண்டும் இயக்குகிறது.
எண்ணும் ஆர்ப்பாட்டம்
எண்ணும் சோதனை:
setInterval(counter, 1000) ஒவ்வொரு 1000 மில்லி விநாடிகளிலும் (1 வினாடி) counter செயல்பாட்டை அழைக்கிறது.
இறங்கு எண்ணிக்கை ஆர்ப்பாட்டம்
இறங்கு எண்ணிக்கை சோதனை:
setTimeout vs setInterval
setTimeout()
நோக்கம்: ஒரு முறை இயக்கம்
செயல்பாடு: தாமதத்திற்குப் பிறகு ஒரு முறை இயக்குகிறது
நிறுத்தம்: தானாக நிறுத்துகிறது
பயன்பாடு: தாமத செய்திகள், ஒரு முறை அனிமேஷன்கள்
setInterval()
நோக்கம்: தொடர்ச்சியான இயக்கம்
செயல்பாடு: ஒவ்வொரு இடைவெளியிலும் இயக்குகிறது
நிறுத்தம்: clearInterval() தேவை
பயன்பாடு: கடிகாரங்கள், எண்ணிகள், அனிமேஷன்கள்
முக்கியமான குறிப்புகள்:
- setTimeout() மற்றும் setInterval() ஆகியவை ID களைத் தருகின்றன, அவை முறையே clearTimeout() மற்றும் clearInterval() உடன் ரத்து செய்யப்படலாம்
- டைமர்கள் கடிகார சீரியலைப் பொறுத்து இயக்கப்படுகின்றன, சரியான நேரத்தை அனைத்து இடைவெளிகளிலும் உத்தரவாதம் செய்யாது
- பக்கத்தில் இருந்து வெளியேறும்போது டைமர்களை எப்போதும் அழிக்கவும், இல்லையெனில் நினைவகக் கசிவு ஏற்படலாம்
- requestAnimationFrame() அனிமேஷன்களுக்கு சிறந்தது, ஏனெனில் இது உலாவியின் ரீபெயிண்ட் சுழற்சியுடன் ஒத்திசைக்கிறது