0

I'm trying to build a metronome with Typescript (and Angular 2). Thanks, to @Nitzan-Tomer (Typescript Loop with Delay), who helped me with the basics.

Now I'm facing the issue, that after I started the metronome, I'm not able to change the interval. Imagine a slider, changing the speed between the sounds (=> interval).

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

theLoop(10);

The interval here is 3000. And I want to be able to change it, after the function was triggered. (Maybe also get rid of the i: number? Because it shouldn't just play the metronome-sound 10 times...

I thought of a class? But I'm not sure how to build it...

Community
  • 1
  • 1
Taremeh
  • 302
  • 2
  • 4
  • 13
  • 1
    Possible duplicate of [Changing the interval of SetInterval while it's running](http://stackoverflow.com/questions/1280263/changing-the-interval-of-setinterval-while-its-running) – Hamms Dec 01 '16 at 21:37
  • Not specifically about the question but I suggest you use more descriptive function names. `theLoop` doesn't tell the reader what your function does. Something like `startMetronomeCycle()` might be better. – Jacob Windsor Dec 01 '16 at 21:40
  • Unfortunately they're using SetInterval and the DOM... I try to build a plain javascript/typescript/angular2 metronome. – Taremeh Dec 01 '16 at 21:41

1 Answers1

2

Here's a simple class to do it:

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)

Nitzan Tomer
  • 155,636
  • 47
  • 315
  • 299
  • Why don't you implement the `setInterval(interval: number)` directly into `start(interval: number)`? – Taremeh Dec 01 '16 at 22:12
  • 1
    I think it's wise to separate the two. The `tick` method is being called repeatedly, and the `start` method is the symmetric counterpart of `stop`. Also, you might want to do more things in `start` which you won't want to repeat. – Nitzan Tomer Dec 01 '16 at 22:23