Return a value from a setTimeout

Question

I'm trying to return a value calculated in a setTimout. But it seems like I can't do get this value. I read that to do this I must use promises. Am I obliged to use this like this exemple : https://italonascimento.github.io/applying-a-timeout-to-your-promises/ ?

My code :

renderTeaserBackground = () => {
    return setTimeout(function() {
        this.setState({ teaserAnimCount: this.state.teaserAnimCount + 1 });
        let teaserBackground = teaserBgImg[this.state.teaserAnimCount];
        console.log(teaserBackground);
    }.bind(this), this.state.teaserAnimDuration * 1000);
    return 'teaserBackground';
}

Thanks

Please include the relevant part of the page you link to *inside* the question. — trincot, Feb 20 '18 at 21:44
the second return statement is unreachable, it will never execute — ltamajs, Feb 20 '18 at 21:46
Yes, the good link : https://italonascimento.github.io/applying-a-timeout-to-your-promises/#usage — Guillaume, Feb 20 '18 at 21:48
I think that was the point @ltamajs, he is not sure how to perform a valid return from the async block — AP., Feb 20 '18 at 21:48

AP. · Answer 1 · 2018-02-20T21:52:15.313

You can use a Promise!

ES6 way - Standard Promises:

renderTeaserBackground = () => new Promise(res => {
    setTimeout(_ => {
        this.setState({teaserAnimCount: this.state.teaserAnimCount + 1});
        let teaserBackground = teaserBgImg[this.state.teaserAnimCount]
        res(teaserBackground) //Return it here!
    }, this.state.teaserAnimDuration * 1000);
})

To use this outside, you can do:

const mainLogic = _ => {
    return renderTeaserBackground().then(teaserBackground => {
        /* Use teaserBackground as you need! */
    })
}

ES7 way - Harmony `async`/`await`

const mainLogic = async _ => {
    const teaserBackground = await renderTeaserBackground()
    /* Use teaserBackground as you need! */
}

Return a value from a setTimeout

1 Answers1

ES6 way - Standard Promises:

ES7 way - Harmony async/await

ES7 way - Harmony `async`/`await`