<!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));