Understanding javascript Promise-CodePudding

[Edit: this is a question about Promises, not setTimeout. Please don't close it without actually reading the question]

I'm trying to understand Promises. From what I've read and understood (which is obviously incomplete or wrong), the following should wait 3 seconds, append "in foo", then append "in bar".

However, "in bar" is first, followed by a 3 second wait, followed by "in foo".

I could use a shove in the right direction on this.

function promiseTest() {
  let promise = new Promise(function(resolve, reject) {
    setTimeout(foo, 3000);
  });
  promise.then(foo).then(bar());
}

function foo() {
  jQuery('#demo').append("<li>in foo</li>");
}

function bar() {
  jQuery('#demo').append("<li>in bar</li>");
}

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <ul id='demo'></ul>
  <button onclick='promiseTest()'>click</button>
</body>

</html>

CodePudding user response：

Since this was reopened, and there multiple issues outside of the initial source of confusion, let me try to explain the problems.

1. Syntax for passing a callback

Executing a callback function is the responsibility of the function you pass it to. So in the case of setTimeout, you expect that after 3 seconds it will call the function you pass it.

const foo = () => console.log('foo');
setTimeout(foo, 3000);
// OR
setTimeout(() => console.log('foo'), 3000);

In both scenarios, you are passing a function, but never calling it yourself.

promise.then(foo).then(bar()) is a problem because you are calling bar, not passing it.

2. Unresolved promises

promise never completes, because you never called resolve or reject. This means, neither .then actually executes.

You were deceived into thinking they were because of the bug with bar().

Final solution

In order to accomplish what you want, you need to resolve the promise. But you need to do so after foo is called. The best way to do this may be to create an anonymous function for the setTimeout callback that calls both foo and resolve.

See below:

function promiseTest() {
  let promise = new Promise(function(resolve, reject) {
    setTimeout(function() {
      foo();
      resolve();
    }, 3000);
  });
  promise.then(bar);
}

function foo() {
  jQuery('#demo').append("<li>in foo</li>");
}

function bar() {
  jQuery('#demo').append("<li>in bar</li>");
}

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <ul id='demo'></ul>
  <button onclick='promiseTest()'>click</button>
</body>

</html>

CodePudding user response：

The argument you're supposed to pass to then() needs to be a function, you are not passing the function bar, you are passing the result of calling the function bar.

Remove the parenthesis to refer to the function instead of the result of calling it.