javascript - typescript 节拍器

Question

我正在尝试使用 Typescript(和 Angular 2)构建一个节拍器。感谢 @Nitzan-Tomer ( Typescript Loop with Delay )，他帮助我完成了基础知识。

现在我面临的问题是，启动节拍器后，我无法更改间隔。想象一个 slider ，改变声音之间的速度(=>间隔)。

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

theLoop(10);

这里的间隔是3000。我希望能够在函数触发后更改它。 (也许还可以去掉 i: number？因为它不应该只播放节拍器声音 10 次...

我想到了一个类(class)？但我不知道如何构建它......

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);
    }
}

( code in playground )