アドベントカレンダーの季節ももうすぐ終わりですね。

私は「setTimeoutのコールバックにasync関数を渡して再帰呼び出しを行う場合、clearTimeoutで再帰呼び出しが止まらない話」を書きたいと思います。
※モチベーション元はrequestAnimationFrameの再帰呼び出しですが、止まらなかった原因は同じです

モチベーション

ある時、下記のような再帰処理を、画面の描画更新用に書いていたのですが、ちょっと描画がカクツクなーと思っていました。

let id = 0;

const startRender = () => {
  const render = async() => {
    ...
    const hoge = await heavyFunc(someCanvasElement);
    ...
    id = requestAnimationFrame(render);
  }
  cancelAnimationFrame(id); // 以前に実行したstartRenderで設定されたコールバックは解除したい
  id = requestAnimationFrame(render);
}

// 複数回呼ばれることを想定
startRender();

重い計算（await heavyFunc(someCanvasElement)）してるから多少は仕方がないと放置する日々でしたが、ある修正をしたところ描画が滑らかになりました。

描画のカクツキの原因は、適切に古い再帰処理が止まっておらず、ムダなコールバックが実行され続けていたことにあります。
※Chrome DevToolsのPerformanceタブと睨めっこしていたわけではないので、状況証拠ですが、、、

本日は放置への反省を込め、原因と対策を記事にしておきたいと思います。

デモ

早速ですが、デモを作ってみたので、前述のコードでピンときていない方はご確認ください。

See the Pen stoppable?-settimeout-loop by haradabox (@haradabox) on CodePen.

startを押すとカウントアップが始まり、stopを押すとカウントアップが止まる、シンプルなカウンターが2つ並んでいます。

両方ともsetTimeoutの再帰呼び出しで実装されていますが、一方は確実に止まり、もう一方は止まることもあれば、止まらないこともあります。

動作が不安定な原因

コードを見てみましょう。

止まる方のカウンター

startボタンクリックでstartメソッドの実行
（最低）100ミリ秒後に実行されるコールバックを設定し、timeoutIDを保持
コールバックの最後でstartメソッドを再帰呼び出しする
stopボタンクリックでclearTimeout

class Counter {
  constructor(renderer) {
    this.count = 0;
    this.timer = null;
    this.renderer = renderer;
  }
  start() {
    this.timer = setTimeout(() => {
      this.count++;
      this.renderer(this.count);
      this.start();
    }, 100);
  }
  stop() {
    clearTimeout(this.timer);
  }
}

const counter = new Counter((count) => {
  document.getElementById("count").innerText = count;
});
const $start = document.getElementById("start");
const $stop = document.getElementById("stop");

$start.addEventListener("click", () => {
  counter.start();
});
$stop.addEventListener("click", () => {
  counter.stop();
});

こちらはsetTimeoutのコールバック関数が同期的に実行されるので、stopボタンクリック時に保持しているtimeoutIDは常に実行前のものとなります。

つまり下記です。

setTimeout実行
（最低）100ミリ秒待つ ★ このタイミングでしかstopが実行できないので、コールバック呼び出しが確実に解除できる
コールバック実行。1へ戻る

止まることもあれば、止まらないこともある方のカウンター

startボタンクリックでstartメソッドの実行
（最低）100ミリ秒後に実行される非同期コールバック（途中でawaitを挟み、（最低）50ミリ秒待つ）を設定し、timeoutIDを保持
非同期コールバックの最後でstartメソッドを再帰呼び出しする
stopボタンクリックでclearTimeout

class AsyncCounter {
  constructor(renderer) {
    this.count = 0;
    this.timer = null;
    this.renderer = renderer;
  }
  start() {
    this.timer = setTimeout(async() => {
      this.count = await new Promise((resolve) => {
        setTimeout(() => resolve(this.count + 1), 50);
      });
      this.renderer(this.count);
      this.start();
    }, 100);
  }
  stop() {
    clearTimeout(this.timer);
  }
}

const counter2 = new AsyncCounter((count) => {
  document.getElementById("count2").innerText = count;
});
const $start = document.getElementById("start");
const $stop = document.getElementById("stop");

$start.addEventListener("click", () => {
  counter2.start();
});
$stop.addEventListener("click", () => {
  counter2.stop();
});

こちらのコールバック関数は非同期であるため、stopボタンクリック時のtimerIDが常に実行前のものとは言えず、stopボタンをクリックするタイミングで結果が異なります。

つまり下記です。

setTimeout実行
約100ミリ秒待つ　★ ここでstopが実行されると、コールバック呼び出しを解除できる
コールバックのawaitまでを実行
約50ミリ秒待つ　★ ここでstopが実行されても、すでにコールバックは呼び出されているため、await以後の再帰呼び出しも実行されてしまう
コールバックのawait以後を実行。1へ戻る

これではいけませんね。なんとかしましょう。

動作安定版デモ

修正したものがこちらです。

See the Pen stoppable?-settimeout-loop by haradabox (@haradabox) on CodePen.

止まりましたね。

確実に止まるようになったカウンター

startボタンクリックでstartメソッドの実行　★startメソッド実行時の時間を保持しておく
renderメソッドで非同期コールバックを設定したsetTimeoutの実行、timeoutIDを保持
★renderメソッド再帰呼び出し前に、保持しておいたstartメソッド実行時の時間を使って、再帰呼び出しすべきかどうかの判定を行う
非同期コールバックの最後でrenderメソッドを再帰呼び出しする

class AsyncCounter {
  constructor(renderer) {
    ...
    this.startTime = null;
  }
  start(startTime) {
    this.startTime = startTime;
    this.render(startTime);
  }
  render(startTime) {
    this.timer = setTimeout(async() => {
      this.count = await new Promise((resolve) => {
        setTimeout(() => {
          resolve(this.count + 1);
        }, 50);
      });
      this.renderer(this.count);
      // startやstopが実行されると、
      // 古いrender実行コンテキストのstartTimeと、最新のthis.startTimeで差が出るため、
      // コールバックの再帰呼び出しが抑制できる
      if(this.startTime !== startTime) return;
      this.render(startTime);
    }, 100);
  }
  stop() {
    this.startTime = null;
    ...
  }
}
...
$start.addEventListener("click", () => {
  counter2.start(performance.now());
});
...

つまり、

setTimeout実行
（最低）100ミリ秒待つ　★ ここでstopが実行されると、コールバック呼び出しを解除できる
コールバックのawaitまでを実行
（最低）50ミリ秒待つ　★ この間にstopが実行されていれば、ガード節により以降の再帰呼び出しはされない
コールバックのawait以後を実行。1へ戻る

というわけで、確実に止まるようになりました。

むすび

素朴なミスでしたね。

ただ、モチベーションでも書きましたが、「表示重い気がするけど、やむない気もする」系の実装不備は、時と場合で放置されてしまっている場面もあるのかなと思います。

気づいた時にはぜひ、なんで重いのか探ってみましょう。

案外素朴に解決できるかもしれませんよ。