Promiseのresolve()を他の場所で呼び出してawaitでの待ちのを終了する
確認した環境
- Google Chrome Version 93.0.4577.63 (Official Build) (64-bit)
- 今回、試した記述方法が、あらゆる環境で動作するかは把握できていない
内容
- Promiseのresolve()は、「Promiseクラスのコンストラクタの第1引数に渡す関数内」でしか呼び出してはいけないと思っていたが、
- resolve()を参照する変数を別のスコープに用意して、呼び出しても期待通りに動作した
- Pormiseオブジェクトを返却する関数を用意しないといけないとも勘違いしていた
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Promise</title>
</head>
<body>
<div id="button" style="width:200px; background-color:darkgrey; border: 1px solid black;">Click me!<div>
</body>
<script>
(async () => {
let clicked;
const waitingForYourClick = new Promise(resolve => clicked = resolve);
const button = document.querySelector("#button");
button.addEventListener("click", clicked);
console.log("Waiting");
await waitingForYourClick;
console.log("Done");
button.removeEventListener("click", clicked);
button.innerHTML = "Clicked!";
})();
</script>
</html>
- Promiseのresolve()は、「Promiseクラスのコンストラクタの第1引数に渡す関数内」でしか呼び出してはいけないと思っていたが、
- resolve()を参照する変数を別のスコープに用意して、呼び出しても期待通りに動作した
- Pormiseオブジェクトを返却する関数を用意しないといけないとも勘違いしていた
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Promise</title>
</head>
<body>
<div id="button" style="width:200px; background-color:darkgrey; border: 1px solid black;">Click me!<div>
</body>
<script>
(async () => {
let clicked;
const waitingForYourClick = new Promise(resolve => clicked = resolve);
const button = document.querySelector("#button");
button.addEventListener("click", clicked);
console.log("Waiting");
await waitingForYourClick;
console.log("Done");
button.removeEventListener("click", clicked);
button.innerHTML = "Clicked!";
})();
</script>
</html>
感想
- async/awaitが好きすぎて、Promiseは書きたくないと思っていたけど、Promiseも好きになれた
Author And Source
この問題について(Promiseのresolve()を他の場所で呼び出してawaitでの待ちのを終了する), 我々は、より多くの情報をここで見つけました https://qiita.com/hachicomb/items/9ec99cb21d33348a34a8著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .