したいこと
メソッド内で処理を一旦止めて、画面のイベントの発火を待ちたい。
このようにするのだ
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS 入力待ち</title>
</head>
<body>
<div id="message"></div>
<button onclick='onButtonClick("Yes")'>Yes</button>
<button onclick='onButtonClick("No")'>No</button>
<button onclick='alert("Hello!!")'>処理中も画面がフリーズせずに別の操作が行えるよ</button>
<script src="main.js"></script>
</body>
</html>
main.js
const messageHtmlElement = document.getElementById("message");
let resolveButtonClick = null;
async function なんか処理() {
messageHtmlElement.innerText = "処理中…";
const result = await waitButtonClick();
messageHtmlElement.innerText = result + "ボタンが押されました。";
}
function waitButtonClick() {
return new Promise(resolve => {
resolveButtonClick = resolve;
});
}
function onButtonClick(str) {
if (resolveButtonClick !== null) {
resolveButtonClick(str);
}
}
なんか処理();