async awaitのサンプル例~webpack使用~
今までJavascriptのasync / awaitの使い方が不明瞭だったので勉強を兼ねてサンプルを作りました。
今回はオブジェクトが右側に移動し、その後文字が書き換わるように設定しました。
サンプルHTML
<div style="overflow: hidden"> <div class="object">tset</div> </div>
サンプルJS
動作させるオブジェクトを指定
var object = document.querySelector('.object')
指定オブジェクトを移動させる関数
function move() { return new Promise((resolve, reject) => { var player = object.animate([ {transform: 'translate(0)'}, {transform: 'translate(90vw, 0)'} ], 1500); resolve(player) }) }
指定したオブジェクトの終了時の場所を指定する関数
function finish() { return new Promise((resolve, reject) => { var moveend = object.style.transform = "translate(90vw, 0)" setTimeout(() => { resolve(moveend) }, 1700) }) }
指定したオブジェクトの文字を変更する関数
function rename() { return new Promise((resolve, reject) => { resolve(object.innerText='移動が完了') }) }
3つの関数を順番に実行させるasyncファンクション
async function myfuncA() { await move() await finish() await rename() }
functionを実行
myfuncA();
発生したエラー
[regeneratorRuntime is not defined]
このエラーが出た場合、下記の方法で対応が可能でした
@babel/polyfillをインストール
yarn add @babel/polyfill
webpack.config.jsのentryに書き加える
entry: ['@babel/polyfill', './js/○○○.js']
このentryは、自分のエントリーファイルに合わせて適宜調整してください