javascriptはsleep機能がないため、実装するためにはちょっとしたテクニックが必要です。たとえば、1秒後に処理を実行させたい場合は
setTimeout(() => {
//ここに実行させたい処理を書く
console.log(‘1秒後に実行されます。’);
}, 1000);
でも、これじゃ非同期なので都合が悪い時もあります。
仕方ないのでDate().getTime()で時間を取得して1秒経ったら処理を実行するようにループ処理を入れる。
でも、今度は同期にはなるが1秒間は画面操作が全くできない(1秒間ずっとループ処理が走るのでほかの処理を受け付けてくれない)
もしこれが5秒、10秒だったら? しかもフロント側のCPU消費が激しくなる。intervalとの組み合わせもありますが面倒です。
そこで簡単に同期を保ちながらsleep処理を行うにはPromiseを使います。
return new Promise((resolve) => {
setTimeout(() => {
console.log(‘sync1 awake in 1000ms sleep’);
resolve(‘resolveに戻り値をセットしないと呼び出し元はずっと待機状態になるよ。’);
}, 1000)
}).then(() => {
console.log(‘sync2′);
});
こんな感じで実装できます。ほかにawaitを使う方法もあるので好きなほうで。ここはポイントだけ押さえているのでシンプルですが、初心者にはちょっと優しくないかもしれないですね。
この記事へのコメントはありません。