はじめに
初学者による初学者向けの記事となります。
筆者が初学者のため、正しくない記述も含まれているかもしれません。
また、１つ１つの説明を省略しています。
本記事を読んで、その場を乗り切った後、
しっかりと Promise, async / await について勉強することを推奨します。
末尾の参考記事を参照してください。
javascript の Promise, async / await を勉強し始めました。
await の記述方法が直感的でとても気に入ったので、
いつも await で記述したかったのですが、
記述できるときと記述できないときがあります。
本記事では、「一定時間処理を停止する」という具体例をもとに、
知見を共有したいと思います。
※javascriptで処理の停止はできないため、
正しくは、 一定時間後にコールバックする という表現になります。
まとめ
await を使って一定時間処理を停止したい場合は、
一定時間処理を停止したい場所がasyncの関数内かどうか
を確認する。
- asyncの関数内なら、awaitを使って記述する。
-
asyncの関数内でないなら、awaitを使わず記述する。
- asyncの即時関数内を定義して、即時関数内でawaitを使って記述する。（別解）
- もしくは、一定時間処理を停止したい処理をasyncの関数内に移動する。
await は async の関数内でしか使用することができません。
一定時間処理停止（疑似）
サンプル
CodePenにサンプルを作成しました。
https://codepen.io/sonoshou/pen/RwPxyVB
asyncの関数内かどうか
本記事では、以下のように定義しています。
asyncの関数内
async function () {
/* asyncの関数内 */
}
asyncの関数内ではない
function () {
/* asyncの関数内ではない */
}
asyncの関数内のsleep処理
function mySleep(time) {
return new Promise( (resolve) => {
setTimeout(resolve, time)
})
}
async function asyncMyFunc() {
console.log("asyncMyFunc:1")
/* ここで一定時間処理を停止することを考える。 */
/* asyncの関数内なので、awaitを使う。 */
await mySleep(2000) // 2000ミリ秒停止
/* 停止した以降の処理を記述する。 */
console.log("asyncMyFunc:2")
}
asyncMyFunc()を実行すると、以下の通り出力される。
asyncMyFunc:1
asyncMyFunc:2
asyncの関数内ではないsleep処理
function mySleep(time) {
return new Promise( (resolve) => {
setTimeout(resolve, time)
})
}
function myFunc() {
console.log("myFunc:1")
/* ここで一定時間処理を停止することを考える。 */
/* asyncの関数内ではないので、awaitを使わず記述する。 */
mySleep(2000).then( () => {
/* 停止した以降の処理を記述する。 */
console.log("myFunc:2")
})
console.log("continue...")
}
myFunc()を実行すると、以下の通り出力される。
myFunc:1
continue...
myFunc:2
一定時間処理を停止したい方にとっては、
continue... は処理されてほしくないですね。
したがって、
mySleep(2000).then( () => {
/* 停止した以降の処理を記述する。 */
console.log("myFunc:2")
})
こちらに記述する必要があります。
asyncの関数内ではないsleep処理の別解
asyncの即時関数を使えば、awaitは使えます。
こちらの使用も検討しましょう。
しかし、結局、ネストは増えてしまいます。
function mySleep(time) {
return new Promise( (resolve) => {
setTimeout(resolve, time)
})
}
function myFuncAsync() {
console.log("myFuncAsync:1");
/* ここで一定時間処理を停止することを考える。 */
(async () => {
await mySleep(2000)
/* 停止した以降の処理を記述する。 */
console.log("myFuncAsync:2")
})();
console.log("continue...")
}
myFuncAsync()を実行すると、以下の通り出力される。
myFunc:1
continue...
myFunc:2