1.1 Asinxronluğun əsas konsepsiyaları
JavaScript-də asinxronluq, əsas icra axınını bloklamadan fon tapşırıqlarını yerinə yetirməyə imkan verir. Bu, xüsusilə, şəbəkə sorğuları, fayl oxumaq və taymerlər kimi xeyli vaxt ala bilən tapşırıqlar üçün çox vacibdir. İndi biz JavaScript-də asinxron proqramlaşdırmanın əsas konsepsiyalarına baxacaq və istifadəsinə dair nümunələr göstərəcəyik.
JavaScript-in tək axınlı xarakteri
JavaScript tək axınlı dildir: bu o deməkdir ki, o, kodu ardıcıl olaraq bir axında icra edir. Lakin, asinxron əməliyyatlar əsas axını digər tapşırıqlar üçün boşaldaraq fon tapşırıqlarını yerinə yetirməyə imkan verir.
Event Loop (Hadisələr Dövrü)
Hadisələr dövrü (Event Loop) JavaScript-in asinxron tapşırıqları yerinə yetirməsinə imkan verən əsas mexanizmdir. Hadisələr dövrü mesajlar növbəsinə (Message Queue) və mikro tapşırıqlar növbəsinə (Microtask Queue) nəzarət edir, asinxron əməliyyatların icrasını təmin edir.
- Mesajlar növbəsi: hadisə işləyiciləri, şəbəkə sorğuları və taymerlər kimi tapşırıqları ehtiva edir. Bu növbədən tapşırıqlar ardıcıl olaraq yerinə yetirilir.
- Mikro tapşırıqlar növbəsi: mesajlar növbəsindəki tapşırıqlarla müqayisədə daha yüksək prioritetli tapşırıqları ehtiva edir. Nümunələrə vədlərin (promises) tamamlanması və mikro tapşırıqlar içərisindəki callback-lərin çağırılması daxildir.
Hadisələr dövrü hər iki növbəni davamlı yoxlayır və əsas axın boşaldıqda növbələrdən tapşırıqları yerinə yetirir.
Asinxron əməliyyatlar
Asinxron əməliyyatlar fon tapşırıqlarını həyata keçirməyə imkan verir. Asinxron əməliyyatların əsas nümunələrinə daxildir:
- Taymerlər (
setTimeout,setInterval) - Hadisə işləyiciləri
- Şəbəkə sorğuları (məsələn,
XMLHttpRequest,Fetch API) - Fayl oxuma/yazma (Node.js-də)
Gəlin bir neçə asinxron əməliyyat nümunəsinə baxaq.
1.2 Taymerlər
Taymerlər tapşırıqların gecikmə ilə və ya müntəzəm intervallarla yerinə yetirilməsinə imkan verir.
setTimeout istifadəsinin nümunəsi
Bu nümunədə setTimeout funksiyanın 2 saniyədən sonra yerinə yetirilməsini təyin edir. Nəticədə əvvəlcə Start və End çıxarılır, daha sonra isə 2 saniyə keçdikdən sonra Executed after 2 seconds çıxarılır.
console.log('Start');
setTimeout(() => {
console.log('Executed after 2 seconds');
}, 2000);
console.log('End');
setInterval istifadəsinin nümunəsi
Bu nümunədə setInterval funksiyanı hər saniyə yerinə yetirir, sayğacı artırır və onun dəyərini çıxarır. Sayğac 5-ə çatdıqda, interval clearInterval vasitəsilə təmizlənir:
let counter = 0;
const intervalID = setInterval(() => {
counter++;
console.log(`Counter: ${counter}`);
if (counter >= 5) {
clearInterval(intervalID);
}
}, 1000);
1.3 Hadisə emalçıları
Hadisə emalçıları istifadəçinin hərəkətləri və ya digər hadisələrə cavab olaraq kodun icrasını təmin edir.
Hadisə emalçılarının istifadəsinə misal
Bu nümunədə click hadisə emalçısı bir düyməyə əlavə edilir. İstifadəçi düyməyə kliklədikdə, Button clicked! mesajı göstərilir:
<!DOCTYPE html>
<html>
<head>
<title>Hadisə Emalçısı Misalı</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', () => {
console.log('Button clicked!');
});
</script>
</body>
</html>
1.4 Şəbəkə sorğuları
Şəbəkə sorğuları serverə asinxron HTTP-sorğuları yerinə yetirməyə imkan verir.
XMLHttpRequest istifadə nümunəsi
Bu nümunədə API-yə asinxron GET-sorğu yaradılır və sorğu tamamlandıqda cavab konsolda göstərilir:
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
const response = JSON.parse(xhr.responseText);
console.log(response);
}
};
xhr.send();
1.5 Event Loop iş prosesində
Event Loop-un necə işlədiyini daha yaxşı başa düşmək üçün belə bir nümunəni nəzərdən keçirək:
console.log('Başla');
setTimeout(() => {
console.log('Timeout 1');
}, 0);
Promise.resolve().then(() => {
console.log('Promise 1');
});
setTimeout(() => {
console.log('Timeout 2');
}, 0);
Promise.resolve().then(() => {
console.log('Promise 2');
});
console.log('Son');
Gözlənilən çıxış belə olacaq:
BaşlaSonPromise 1Promise 2Timeout 1Timeout 2
Bu nümunədə əvvəlcə sinxron əməliyyatlar yerinə yetirilir (console.log('Başla') və console.log('Son')). Daha sonra mikrovəzifələr (promislerin handlerləri) yerinə yetirilir və yalnız bundan sonra mesaj sırasındakı vəzifələr (setTimeout) icra olunur.
GO TO FULL VERSION