[JavaScript]Timer（setInterval） とThis

Timerのおさらい。

下のようなファイルをつくる。

// ループの間隔を 100ms に指定
const Interval = 100;

// イベントの開始
const StartEvent = () => {
  for (let i = 0; i < 10; i++) {
    console.log(i);
    StopEvent(i);
  }
};
// イベントの終了
const StopEvent = i => {
  if (i == 9) {
    console.log("End");
    clearInterval(Timer);
    Timer = null;
  }
};

// タイマー, 宣言した瞬間に開始
const Bang = () => {
  Timer = setInterval(StartEvent, Interval);
};

// タイマー開始
Bang();

これを実行すると次の結果が返る。

% node 220613.js
0
1
2
3
4
5
6
7
8
9
End

タイマー自体は，関数にする必要が無いので注意が必要（Timer変数の部分）。
＊上のコードで，タイマー部分（Timer変数）を関数にすると，無限ループが生じる。

関数で呼び出す場合は，そのための関数（上のコードだと Bang関数）を用意し，その中で，タイマー変数を指定すれば良い。

＝＝＝

さて，上のコードでも問題ないのだが，ちらばった変数をまとめておきたい，こともあるかもしれない。

そう思ってまとめたのが，次の例。辞書変数と this を使う。

// 辞書
const Main = {
  //
  // ループの間隔を 100ms に指定
  Interval: 100,
  Timer: null,
  //
  // イベントの開始
  // アロー関数にすると, 実行時に this が undefined になるので注意
  StartEvent() {
    this.Timer = setInterval(_this => {
      for (let i = 0; i < 10; i++) {
        console.log(i);
        _this.StopEvent(i, _this);
      }
    }, this.Interval, this);
  },
  //
  // イベントの終了
  StopEvent(i, _this) {
    if (i == 9) {
      console.log("End");
      clearInterval(this.Timer);
      _this.Timer = null;
    }
  }
};

Main.StartEvent();

実行結果は次の通り。

node 220613.js
0
1
2
3
4
5
6
7
8
9
End

アロー関数にしたときと，そうでないときの違いを，いまいち分かっていない。

そういった，JavaScriptの細かい挙動を理解しておかないと，えらいバグを生み出すのだろう。

大変です。

---