Javascript Promise Chains Not Waiting For Previous Promise To Execute

I'm struggling to understand javascript promises. I have a simple list and I want to highlight each element in turn by adding an 'active' class, with a pause between each. So I hav

Solution 1:

You need to pass a function reference to .then(), not a promise. So change this:

.then(wait(1000))

to this:

.then(wait.bind(null, 1000))

or this:

.then(() => wait(1000))

.then() only works properly when you pass it a function reference that it can call later. When you do .then(wait(1000)), you're executing wait(1000) immediately and passing the return value (a promise) to .then(). That is not how .then() works and you didn't want to be executing wait(1000) immediately either.

---

Or, you could make a new waitFn() that returns a function that could be used in the way you were doing (because it returns a function when called):

functionwaitFn(t) {
    returnfunction() { returnwait(t);}
}

Then, you could do this:

wait(1000)
  .then(function () { setStep(1) })
  .then(waitFn(1000))
  .then(function () { setStep(2) })
  .then(waitFn(1000))
.  then(function () { setStep(3) })