非同期処理をループさせる方法。ポモドーロタイマーというやつで、25分⇒5分⇒25分⇒5分…と、指定回数繰り返します。

Question

#作りたいもの
タイマーのWebアプリを作っています。ポモドーロタイマーというやつで、タイマー(25分)⇒タイマー(5分)を1セットとし、{[25分⇒5分]⇒[25分⇒5分]…}と、指定回数分、カウントダウンを繰り返します。
#できていること
「25分⇒5分」といった、動作が一度だけでいい場合の処理は、Promiseで作ることができました。
下のコードでは、テスト用に、25分のところを25秒のように変えています。
#問題点
この非同期処理を、繰り返す、という部分で躓いています。Promise処理をループすることができれば、要件を満たせると思ったのですが、うまくいきません。

非同期処理を、同期的にループする方法、あるいは、要件を満たすための別の方法などがあれば教えていただければ助かります。

よろしくお願いします。

// タイマーを表示する関数です
function startTimer() {
  // 繰り返し回数を取得する
  var setCount = document.getElementById('setCount').value;
  var dt = new Date();
  var timeLimit = new Date(dt.getTime() + 30 * 1000); // 30秒後
  workTimer(timeLimit).then(() => {
    console.log('workTimerが終了');
    restTimer(timeLimiti).then(() => {
      console.log('restTimerが終了');
    });
  });
}
// 残り時間(ms)を文字列に変換する関数です
function returnTimeString(ms) {
  var min = Math.floor(ms / 60000);
  var sec = Math.floor((ms % 60000) / 1000);
  min = ('0' + min).slice(-2);
  sec = ('0' + sec).slice(-2);
  return `${min}:${sec}`;
}
// workTimeを計算する関数です
function workTimer(timeLimit) {
  return new Promise((resolve) => {
    var timer = setInterval(() => {
      var now = new Date();
      var diff = timeLimit - now;
      if (diff <= 5 * 1000) {
        console.log('workTimer 停止');
        clearInterval(timer);
        resolve();
      } else {
        var timeString = returnTimeString(diff - 5 * 1000); // restTimeを引いた値を渡す
        console.log(`workTimer: ${timeString}`);
      }
    }, 100);
  });
}
// restTimeを計算する関数です
function restTimer(timeLimit) {
  return new Promise((resolve) => {
    var timer = setInterval(() => {
      var now = new Date();
      var diff = timeLimit - now;
      if (diff <= 0) {
        console.log('restTimer 停止');
        clearInterval(timer);
        resolve();
      } else if (diff > 0) {
        var timeString = returnTimeString(diff);
        console.log(`restTimer: ${timeString}`);
      }
    }, 100);
  });
}

Answer 1

TODOとしてはこんな感じですかね。

• Promise使うならasync/await使おう
• コピペ処理多すぎ問題の解決

async / await構文はPromiseを使う上で無くてはならないもので、
寧ろこれらの構文無しでPromise使うなんてメリット全く無いじゃん
レベルの必須さになっています。

確実に学習して使えるようにしておきましょう。
setIntervalは使いづらいので
setTimeout自体Promise化してasync/await構文として使い勝手が良いように変えていきます。

// setTimeoutをPromiseでラッピングしただけ関数
const sleep = ms => new Promise(resolve =>
  setTimeout(resolve, ms)
);

// await構文を使うためにasync関数を宣言する
const start = async () => {
  // setInervalじゃなくて無限ループにして使う
  while (true) {
    // awaitという糖衣構文により同期処理っぽいコードをthenのチェーンに変換してくれる
    await sleep(3000);
    console.log("3秒実行");
    await sleep(500);
    console.log("0.5秒実行");
  }
}

start();

要するにこんな感じで解決出来るようになります。

質問文のコードからだと遠い道のりになりそうですが、
慣れればとても簡単に扱えるようになるので工夫してみてください。

Comments

[shimon_]

ありがとうございました！
練習して、少しづつものにしていきます！

Answer 2

「非同期処理を、同期的にループする」ことはできませんので、考え方を変える必要があります。
この場合であれば、restTimer(timeLimiti).then の中で startTimer() を呼べば良いのでは。

また、タイマーの処理でわざわざ Promise を使う必要はないと思います。（Promise の練習中だったらごめんなさい。）

Answer 3

こんなふうではないでしょうか？

Comments

[yambejp]

var count=3;
var first=5;
var second=2;
(async()=>{
console.log("start");
for(var i=0;i<count;i++){
await new Promise(r=>setTimeout(()=>r(),first*1000));
console.log(first);
await new Promise(r=>setTimeout(()=>r(),second*1000));
console.log(second);
}
console.log("end");
})();

[yambejp]

まあ普通にやるなら1秒ごと（or もっと小さく/大きく）に
チェッカーを走らせ、想定時間をオーバーしたタイミングで
処理を走らせるので十分いけるとおもいますけどね
汎用性や管理しやすさを考えればsetIntarvalがベターだと思います