Typescript Metronome

Question

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...

Possible duplicate of Changing the interval of SetInterval while it's running — Hamms
– Hamms, Commented Dec 1, 2016 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
– Jacob Windsor, Commented Dec 1, 2016 at 21:40
Unfortunately they're using SetInterval and the DOM... I try to build a plain javascript/typescript/angular2 metronome. — Taremeh
– Taremeh, Commented Dec 1, 2016 at 21:41

Nitzan Tomer · Accepted Answer · 2016-12-01 21:40:50Z

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)

answered Dec 1, 2016 at 21:40

Nitzan Tomer

166k51 gold badges330 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Taremeh Over a year ago

Why don't you implement the setInterval(interval: number) directly into start(interval: number)?

Nitzan Tomer Over a year ago

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.

Collectives™ on Stack Overflow

Typescript Metronome

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related