TL;DR
- 큐를 이용해서 비동기 함수로 전달한 콜백의 실행 순서를 이벤트가 발생한 순서대로 실행하게 만들 수 있다
비동기 함수 실행 순서 맞추기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>queue</title>
<script src="main.js" defer></script>
</head>
<body>
<h1>update div</h1>
<div>
<button class="button10">show 10</button>
<button class="button100">show 100</button>
</div>
<div class="showBox">initial value</div>
</body>
</html>
button10을 클릭하면 1초뒤에 10을 showBox에 표시하고
button100을 클릭하면 0.1초 뒤에 100을 표시할 때,
button10을 클릭하고 바로 button100을 클릭하면
0.1초 뒤에 바로 100이 보여졌다가 1초 뒤에 10으로 보여진다
비동기적으로 나중에 완료된 결과로 덮어씌어지는 것이다
이러한 비동기적인 코드를 클릭한 순서대로 실행되도록 할 수 있는 방법에 대해 알아보자
function slowReturn() {
return new Promise((resolve) => {
setTimeout(() => {
resolve();
}, 1000);
});
}
function fastReturn() {
return new Promise((resolve) => {
setTimeout(() => {
resolve();
}, 100);
});
}
const showBox = document.querySelector(".showBox");
const button10 = document.querySelector(".button10");
const button100 = document.querySelector(".button100");
const button10Callback = async () => {
await slowReturn();
showBox.innerHTML = "10";
};
const button100Callback = async () => {
await fastReturn();
showBox.innerHTML = "100";
};
// 큐 관련 코드 시작
let queue = [];
let isProcessing = false;
const MAX_QUEUE_SIZE = 5;
const processQueue = async () => {
if (isProcessing) return;
isProcessing = true;
while (queue.length > 0) {
const task = queue.shift();
await task();
}
isProcessing = false;
};
const enqueueTask = (task) => {
if (queue.length < MAX_QUEUE_SIZE) {
queue.push(task);
processQueue();
} else {
console.warn("Queue is full! Task is not added.");
}
};
// 큐 관련 코드 끝
// button10.addEventListener("click", button10Callback);
// button100.addEventListener("click", button100Callback);
button10.addEventListener("click", () => enqueueTask(button10Callback));
button100.addEventListener("click", () => enqueueTask(button100Callback));
- 큐를 만들고 실행되어야 하는 콜백함수를 콜백함수에 넣어서 큐에 넣은 순서대로 실행되게 만들었다
참고
움직이는 만큼 행복해진다