Javascript承诺像我期望的那样工作

Question

I am trying to understand promises and getting a bit confused here. I am playing with different scenarios and I stack on one of them. Why doesn't let third = function() wait for let second = function() to stop counting?

 let first = function () { return new Promise(function (resolve, reject) { setTimeout(function () { console.log('first'); resolve() }, 3000) }) } let second = function () { return new Promise(function (resolve, reject) { let iter = 7 console.log(iter); for (let i = 0; i <= iter; i++) { (function(n) { setTimeout(function(){ console.log('hi'); console.log(n); }, 400 * i); }(i)*i); } console.log('seco'); resolve(); }) } let third = function() { return new Promise(function (resolve, reject) { console.log('thir'); resolve() }) }; let scenario = function() { first() .then(() => second()) .then(() => third()) } scenario() 

Answer 1

setTimeout doesn't wait for the function to return - it just schedules it to be executed later. The call to setTimeout returns immediately and your task finishes after that.

To wait for the scheduled function to execute after a certain period of time, call resolve() at the end of the delayed function. That way the promise will only be completed once the scheduled function executes.

Answer 2

It is because for loop won't wait for your setTimeout method to execute. Every time the for loop encounters the setTimeout method, JS will call the event loop and place it there (to be executed once it times out) and move forward. That's why it calls your resolve before printing the console.log statements from the setTimeout method. For an analogy, check this

for (let i= 0; i< 5; i++) {
  setTimeout(() => {
    console.log('I am inside');
  }, 1000);

  console.log('I am outside')
}

It will print I am outside first (5 times) and then I am inside .

Answer 3

It is possible to create this effect, but you need to put your resolve() in its own setTimeout() , adjusting the second parameter such that there is sufficient time for the other timeouts to complete.

 const first = new Promise((resolve, reject) => { setTimeout(() => { resolve('First promise resolved!') }, 400) }) const second = new Promise((resolve, reject) => { let iter = 7 for (let i = 1; i < iter; i++) { setTimeout(() => { console.log("Iteration: ", i) }, i * 500) } setTimeout(() => { resolve('Second promise resolved!') }, iter * 500) }) first .then(res => console.log(res)) .then(() => second .then(res => console.log(res))) 

EDIT: Just to note, the for loop will start printing as soon as second is defined. If you want to wait for this loop to start, you should add it inside .then() so that it triggers after the first promise has been resolved.

Answer 4

@johnnybigH, The second function resolve's outside of timeout so technically it will not wait for timeout function to complete as you are resolving it out of setTimeout. Now 2nd one is resolved so it is going for the execution of the third function. What you can do is inside of 2nd function for the loop. look for the last iteration and resolve the end function.

for (let i = 0; i <= iter; i++) {
        (function(n) {
            setTimeout(function(){
                console.log('hi');
                console.log(n);
            if(i == iter) resolve();
            }, 400 * i);
        }(i)*i);
    }

Answer 5

This is the expected behavior.

The setTimeouts will not demonstrate expected order since the functions themselves resolved in the order as defined in the promise. Just replace the setTimeouts with console.log()'s and you will see the order executed as defined.

Answer 6

Well, you call resolve() inside of your for loop. You should place it outside of the for loop so that it waits for the loop to finish.