Confused by sitepoint example: chaining .then promise callbacks

[maxel1]

Hi,

I’m following along with the sitepoint tutorial here: https://www.sitepoint.com/delay-sleep-pause-wait/ and was confused by the following code:

console.log("Hello");
sleep(2000)
  .then(() => { console.log("World!"); })
  .then(() => {
    sleep(2000)
      .then(() => { console.log("Goodbye!"); })
    });

I need to chain more .then() calls (I need 5 iterations of what i’m doing), but I can’t figure out this syntax. Why is the final .then() callback chained inside the second one? I’ve been reading around but can’t figure it out and am not sure why this would be.

As a side note, I asynch/await methods are not accessible to me and so I am relying on the .then method. thanks!

[Thallius]

First of all: async/await is nothing else then an other syntax for .then(). So there is no reason why they should be not accessible for you.

If you think you need 5 iterations you might have a concept problem. Normally this is a good hint for a code smell.

Perhaps you explain a little bit more what to try to achieve and we can help to find a cleaner solution?

To understand why the second .then() is nested into the first one, you need to understand how promises work and what they do. This is not so self explaining at the beginning but you should play around with promises a little bit, create your own and test them. So you will get familiar with this.

[maxel1]

Hi Tallius,

Well, I’m embedding my JavaScript into a Qualtrics survey - I’m not the first to find that they couldn’t get it to work: https://community.qualtrics.com/XMcommunity/search. Note that Qualtrics uses the version of JavaScript that is running on the user’s browser - I was able to get the async method to work from my own html file - just not when loaded onto Qualtrics.

I’m making a cognitive task which displays two squares full of dots on the page. These dots are shown in 5 different arrangements in the square - which makes them look like they are flickering. There is a wait of 150 ms between the showing of each arrangement of dots. My program uses jsPysch package.

As a side note, I have figured out that the syntax works like this:

console.log("Hello");
sleep(2000)
    .then(() => { console.log("World!"); })
        .then(() => {sleep(2000)
            .then(() => { console.log("Goodbye!"); })
                .then(() => {sleep(2000)
                    .then(() => { console.log("Goodbye!");})
                        .then(() => {sleep(2000)
                            .then(() => { console.log("!");})
                        })
                })
        })

Is this enough information for you to suggest a better solution?

Thanks!

[Thallius]

So why don’t you work with setTimeout() or setInterval()? This is much more useful then sleep() in your case because you only need to recall your drawing function every 150ms

[maxel1]

ah okay! great, I’ve done that now.

Thanks

(for anyone with a similar question, this answer is useful: https://stackoverflow.com/a/2956980).

[m3g4p0p]

@maxel1

Why is the final .then() callback chained inside the second one?

Hi @maxel1, FWIW the nesting is indeed not necessary here – since sleep() returns a promise, you could also directly chain it like so:

console.log('Hello')
sleep(2000)
  .then(() => console.log('world!'))
  .then(() => sleep(2000))
  .then(() => console.log('Goodbye!'))

[James_Hibbard]

@m3g4p0p

since sleep() returns a promise, you could also directly chain it like so:

Nice one. That article is an old one of mine. I guess I must have missed that at time.

I updated the article to remove the chaining (it’ll take a while for the changes to reflect on the site, though).