Tukukkk

Well this could seem redundant given the numerous topic about interaction between Promises and setTimeout but I can't find an answer that exactly fit my case (or that I am capable of interpreting !)

In the case of a Video player API usage, I need to loop on a sequence, and exit the loop when a certain condition is reached.

The following code works, but I was wondering if there was a sexier way, using Promise chaining instead of this :

export class LoopStep {

// looping from 0 to 5 seconds in the video

this.duration = 5; 

this.start = 0;



onStart() { // entry point

    return this.onLoop();

}



onLoop() {

    return new Promise((resolve) => {

        this.loopAndResolve(resolve);

    });

}



loopAndResolve(resolve) { // start loop

    if(this.isLooping) { // exit condition when turned to false

        this.player.setTime(this.start);

        this.player.play();

        setTimeout(this.loopAndResolve.bind(this, resolve), this.duration * 1000); // callback

    } else {

        resolve();

    }

}

}



// Anywhere else

loopStep.onStart.then(()=> console.log('exiting loop successfully')); // OK

Actually I would find more appropriated to avoid passing the "resolve" function as a parameter (only because I have a feeling that this could be wrong, or at least not "the most efficient/sexy").

You could try something like this:

export class LoopStep {

    public onStart(): Promise<void> { // entry point

        return this.onLoop();

    }



    private onLoop(): Promise<void> {

        return this.loopAndResolve();

    }



    private loopAndResolve(): Promise<void> { // start loop

        if (this.isLooping) { // exit condition when turned to false

            this.player.setTime(this.start);

            this.player.play();

            setTimeout(() => this.loopAndResolve(), this.duration * 1000);

        } else {

            return Promise.resolve();

        }

    }

}



// Anywhere else

loopsStep.onStart().then(() => console.log('exiting loop successfully')); // OK

One of the best things of Typescript is the type safety. It's easier to keep track of the promises you're passing from one function to another if you declare them in the return type.

In your case, where you just want a cleaner way to resolve a Promise, you can use Promise.resolve();. It's pretty straightforward to use and very useful. DOCS

(Don't forget the parenthesis when calling onStart!)