[JavaScript]イベントにもasync/awaitを使おう - TES Blog

はじめに ECMAScriptが2015年から毎年バージョンアップするようになり、JavaScriptの仕様は大きく変わりました。 特に非同期処理まわりは、Promise(ECMAScript2015~)、async/await(ECMAScript2017~)が導入されたことで、 コールバック地獄の回避や可読性の向上などを実現できるようになりました。 また、JavaScriptではクリックやマウスホバーなどのイベントを検知する機能があります。 通常、イベント登録時に、イベント発火時に実行される処理をコールバックとして渡します。 実は、この従来の書き方をasync/awaitに置き換えると、一見すると同期処理的に書けるようにできます。 本記事では、以下の例のように、async/awaitへ置き換える話を説明します。 // いままでの書き方 const target = document.q

[zuboriradio]

“const target = document.querySelector("#button"); // ↓async/awaitを使えるように定義した関数（詳細は後述）。 // クリックされるまで、次の処理へ進まず非同期的に待機する。 await awaitForClick(target); alert("クリックされた！");”

[lazex]

ダイアログ開いて結果を返すのをasync関数にしておくとawait使って呼び出せばconfirm関数みたいに使えて便利

[coppieee]

やるやる

[mole-studio]

generatorの発想かな

[Fushihara]

一回だけの実行ならこれもアリか

[Cherenkov]

Promise async await addEventListener