Typescript Loop with Delay

Question

I'm trying to create a metronome with Typescript.

I have this javascript code:

(function theLoop (i) {
        setTimeout(function () {
            metronome.play();
            if (--i) {
                theLoop(i);
            }
        }, 3000);          // interval set to 3000
    })(10);                // play it 10 times

And I wanted to convert it into Typescript code. Unfortunately I don't know how to do this (espacially regarding the last line => })(10);

Can someone help me with this?

TypeScript is just a superset of JavaScript. On the other hand, the metronome should probably have a way of changing it's tempo and a way of starting it and stopping it as well as making it tick on demand. Basically I'd expect metronome.changeTempo(bpm); metronome.onTick(function () { if (...) metronome.stop(); }); metronome.play();. You could also have a built-in feature specific to ticking a number of times. metronome.tick(10). — plalx
– plalx, Commented Dec 1, 2016 at 19:56
@plalx I like your idea! What would the code look like? Or: How can I approach it? — Taremeh
– Taremeh, Commented Dec 1, 2016 at 20:18
Do you know a bit of OO? Look at the class keyword and examples on how to use it. Metronome would be a class here, not an Audio file. It could take an audio as a constructor parameter though.. let metronome = new Metronome(new Audio('tick.mp3')). — plalx
– plalx, Commented Dec 1, 2016 at 20:24
@plalx Do you know a tutorial regarding this topic? Because I'm unfortunately not this far in OO... — Taremeh
– Taremeh, Commented Dec 1, 2016 at 20:57

Nitzan Tomer · Accepted Answer · 2016-12-01 21:03:42Z

3

As everyone said, typescipt is a superset of javascript so your code is valid typescript, but here's how to do it with an arrow function (which is also es6 javascript) and types:

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

(code in playground)

And here's another variation:

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

theLoop(10);

(code in playground)

Edit

Using the 2nd option I gave you, changing the delay is easy:

let theLoop: (i: number, delay?) => void = (i: number, delay = 3000) => {
    if (i % 2 === 0) {
        delay = 1500;
    }

    setTimeout(() => {
        metronome.play();
        if (--i) {
            theLoop(i);
        }
    }, delay);
};

theLoop(10);

(code in playground)

edited Dec 1, 2016 at 21:03

answered Dec 1, 2016 at 20:21

Nitzan Tomer

166k51 gold badges330 silver badges307 bronze badges

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

4 Comments

Taremeh Over a year ago

Thanks! But is there any way to change the interval (3000) after I started theLoop? Because now, when I change the number, theLoop still continues until it played the sound 10 times...

Taremeh Over a year ago

Wow, this looks amazing. Unfortunately I still get a second overlapping metronome, if I change the delay/interval. Also, the performance is now really bad (the delays aren't strictly in time)...

Nitzan Tomer Over a year ago

I don't know what you're trying to do so I can't help you with that. You wanted to know how to convert your js code to ts, and that's what I answered. If you have some specific in mind then better ask it, probably as a new question if it's not related to your original one.

Taremeh Over a year ago

Yeah, thanks. I opened a new question and gave more information: stackoverflow.com/questions/40920820/typescript-metronome Thanks for your help!

Suren Srapyan · Accepted Answer · 2016-12-01 19:44:36Z

1

Typescript is a upperset of Javascript. So you can copy your code into Typescript and it will work

answered Dec 1, 2016 at 19:44

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

Collectives™ on Stack Overflow

Typescript Loop with Delay

2 Answers 2

Edit

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Edit

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related