Машинопись Метроном

Question

Я пытаюсь построить метроном с Typescript (и Angular 2). Спасибо @ Nitzan-Tomer ( Typescript Loop с задержкой), который помог мне с основами.

Теперь я сталкиваюсь с проблемой: после запуска метронома я не могу изменить интервал. Представьте себе слайдер, меняющий скорость между звуками (=> интервал).

let theLoop: (i: number) => void = (i: number) => {
    setTimeout(() => {
        metronome.play();
        if (--i) {
            theLoop(i);
        }
    }, 3000);
};

theLoop(10);

Интервал здесь составляет 3000. И я хочу иметь возможность изменить его после запуска функции. (Может быть, также избавиться от i: number? Потому что он не должен просто играть звук метронома 10 раз...

Я думал о классе? Но я не уверен, как это сделать...

Answer 1

Вот простой класс, чтобы сделать это:

class Metronome {
    private interval: number;
    private timer: number;

    constructor(interval = 3000) {
        this.interval = interval;
    }

    start(): void {
        this.tick();
    }

    stop() {
        clearTimeout(this.timer);
    }

    setInterval(interval: number) {
        this.interval = interval;
    }

    private tick() {
        // do something here
        this.timer = setTimeout(this.tick.bind(this), this.interval);
    }
}

( код на детской площадке)