javascriptで一定時間処理を停止する #JavaScript

はじめに

初学者による初学者向けの記事となります。

筆者が初学者のため、正しくない記述も含まれているかもしれません。
また、１つ１つの説明を省略しています。
本記事を読んで、その場を乗り切った後、
しっかりと 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