Các hàm không đồng bộ được định nghĩa với từ khóa async và được giới thiệu trong ES 2015. Các hàm này được giới thiệu để định nghĩa một cách tốt hơn để viết lời hứa đồng ý hơn là gọi lại. Từ khóa await được sử dụng bên trong một hàm không đồng bộ để tạm dừng luồng điều khiển mà nó chờ đợi cho lời hứa.
Sau đây là mã cho các hàm không đồng bộ trong JavaScript -
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 18px;
color: blueviolet;
font-weight: 500;
}
</style>
</head>
<body>
<h1>Asynchronous functions in JavaScript</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to call the function asyncFunc</h3>
<script>
let BtnEle = document.querySelector(".Btn");
let resEle = document.querySelector(".result");
function displayText() {
return new Promise((resolve) => {
setTimeout(() => {
resolve("Hello World");
}, 1500);
});
}
async function asyncFunc() {
resEle.innerHTML = await displayText();
}
BtnEle.addEventListener("click", () => {
asyncFunc();
});
</script>
</body>
</html> Đầu ra
Khi nhấp vào nút 'BẤM VÀO ĐÂY' và đợi 2 giây -
