【TypeScript/JavaScript】awaitできる遅延処理

TypeScriptやJavaScriptでawaitできる遅延処理を実装したい！

概要

今回の記事では、TypeScriptやJavaScriptでawaitできる遅延処理を実装する手順を掲載する。

仕様書

環境

typescript 5.2.2

手順書

デバッグ時にawaitできる遅延処理が必要になることがある。
特にReactのカスタムフックでロード中の判定をデバッグしたい場合に1秒間のロード時間がかかるとする。

デバッグできない例。

setIsLoading(true);
setTimeout(() => {
    console.log("nya-n");
}, 1000);
setIsLoading(false);

setTimeout関数をawaitの感覚でやってしまうと、この場合setTimeoutを待たずにsetIsLoading(false)が実行されてしまい、setIsLoading(true)`に起因する描写は実行されない。

デバッグできる例。

setIsLoading(true);
setTimeout(() => {
    console.log("nya-n");
    setIsLoading(false);
}, 1000);

setTimeoutの中？に書いた処理は設定した時間後に実行されるので、このように書けばsetTimeoutを待った後にsetIsLoading(true)が実行される。

前述の書き方だとブロックが分かれるんだけども、ブロックを分けたくない場合もある。デバッグとリリースの処理を一緒に書いてる場合なんかそうだと思う。そんな時は任意の時間をawaitできる関数を用意しておく。

function delay(ms: number): Promise<void> {
    return new Promise(resolve => setTimeout(resolve, ms));
}

setIsLoading(true);
await delay(1000);
console.log("nya-n");
setIsLoading(false);

こんな感じで同じブロック内で処理できる。

まとめ（感想文）

分かってればあたり前なんだろうけども、慣れてないもんでね。