JavaScript - це однопоточна мова програмування, в якій код виконується в одному стеку викликів.
JavaScript дозволяє виконувати асинхронний код. Але асинхронність у JavaScript не означає те саме, що однопоточність чи багато потоків.
JavaScript може мати асинхронний код, але він як правило однопотоковий.
- Для асинхронного виконання коду у JavaScript можна застосовувати:
- таймери
- Promise
- async & await
Таймери
Таймери дозволяють виконати код через заданий час. Таймер викликається за допомогою setTimeout().
У JavaScript таймер додає код в чергу виконання коду з заданою затримкою. Тому якщо основний код JavaScript досить навантажує виконання, тобто черга виконання велика то таймер може виконатися з невеликою похибкою часу.
setTimeout( function(){alert('минуло 3 секунди');} ,3000)
Promise
Для асинхронного виконання коду в JavaScript було створено Promise.
function loadImg(url){ //функція завантаження зображення яка повертає проміс
return new Promise(function(resolve, reject){
var img=document.createElement('img');
img.onload=function(){resolve(img)};
img.onerror=function(er){reject(er)};
img.src=url;
});
}
var url1='/dani/test.jpg', url2='/dani/test.png', url3='/_images/js.png';
// завантажуємо зображення ланцюжком промісів
loadImg(url1)
.then(function(img1){ alert(img1); return loadImg(url2); })
.then(function(img2){ alert(img2); return loadImg(url3); })
.then(function(img3){ alert(img3); })
.catch(function(e){console.log('Помилка завантаження зображення: ',e);});
async & await
async & await дозволяє писати асинхронні функції.
function loadImg(url){ //функція завантаження зображення яка повертає проміс
return new Promise(function(resolve, reject){
var img=document.createElement('img');
img.onload=function(){resolve(img)};
img.onerror=function(er){reject(er)};
img.src=url;
});
}
async function lo(){
var res=[];
var img1 = await loadImg('/dani/test.jpg');
var img2 = await loadImg('/dani/test.png');
var img3 = await loadImg('/_images/js.png');
return [img1, img2, img3];
}
lo().then(function(res){ alert(res); });