Javascript: how to get one function to run after another completes

Question

I'm new to javascript and promises. I'm trying to get one function not to start running until the first function has completed.

In this case, I want the "dontDoUntilDelayIsComplete" function to run AFTER the "delayGreet" function.

function delayGreet() {
    setTimeout(greet, 1000);
}

function greet() {
    para1.textContent = "Hi there!";
}

function createPromise() {
    return new Promise((resolve) => resolve(delayGreet));
}

function dontDoUntilDelayIsComplete() {
    para2.textContent = "Please dont do before";
}

function callMethod() {
    createPromise().then(dontDoUntilDelayIsComplete);
}

callMethod();`

I've tried putting the functions within a promise and use the .then() method. However, I'm unable to get it to work.

Perhaps you need this: [Using setTimeout in a promise chain](https://stackoverflow.com/questions/39538473/using-settimeout-on-promise-chain/39538518#39538518). — jfriend00, Mar 30 '23 at 00:42
If the two functions are returning promises, couldn't you simply chain them? — uzluisf, Mar 31 '23 at 01:58

Chris Hamilton · Accepted Answer · 2023-03-30T01:10:41.777

0

I don't think this is accurate:

"I want the "dontDoUntilDelayIsComplete" function to run AFTER the "delayGreet" function"

I think you want dontDoUntilDelayIsComplete to run after greet, which is different.

setTimeout does not create a promise, it simply schedules a function to run. If you want something to run immediately after that, then schedule that as well.

function greet() {
    console.log("Hi there!");
}

function dontDoUntilDelayIsComplete() {
    console.log("Please dont do before");
}

function delayGreet() {
    function greetThenDoSomethingElse() {
      greet();
      dontDoUntilDelayIsComplete();
    }
    setTimeout(greetThenDoSomethingElse, 1000);
}

delayGreet();

Here's a solution with a generic callback:

function greet() {
    console.log("Hi there!");
}

function dontDoUntilDelayIsComplete() {
    console.log("Please dont do before");
}

function delayGreetThenCallback(callback) {
    function greetThenCallback() {
      greet();
      callback();
    }
    setTimeout(greetThenCallback, 1000);
}

delayGreetThenCallback(dontDoUntilDelayIsComplete);

And here's one with a promise:

function greet() {
  console.log('Hi there!');
}

function dontDoUntilDelayIsComplete() {
  console.log('Please dont do before');
}

function delayGreet() {
  return new Promise((resolve) =>
    setTimeout(() => {
      greet();
      resolve();
    }, 1000)
  );
}

delayGreet().then(dontDoUntilDelayIsComplete);

edited Mar 30 '23 at 01:10

answered Mar 30 '23 at 00:44

Chris Hamilton

9,252
1
9
26

Where did the promise go? – Bergi Mar 30 '23 at 00:48
@Bergi They don't need one, unless I'm misunderstanding. I believe they just want the second function to run after the timeout. – Chris Hamilton Mar 30 '23 at 00:48
"*I'm new to JS and promises*", as well as the tags [promise] and [async-await] on the question, made me assume that the OP wants to learn how to do this with promises. And imo they indeed *should* do this with promises, it's the right way to approach this problem. – Bergi Mar 30 '23 at 00:52
@Bergi maybe, depends on the use case. – Chris Hamilton Mar 30 '23 at 00:56
Actually, what i do want is a generic "function2" to run after "function1" is complete. Is there an event that triggers after "function1" runs if a promise is set up? – gbrother54 Mar 30 '23 at 00:58
@gbrother54 sure, I edited to include a solution that takes a generic callback, as well as one that uses a promise. – Chris Hamilton Mar 30 '23 at 01:07
@gbrother54 Yes, the promise fulfillment "event". It's what you're listening for when you use `.then(dontDoUntilDelayIsComplete)`. However the promise does not automatically fulfill when "function1" is complete (unless it's an `async function` with `await`), the function must create, return, and later resolve the promise. – Bergi Mar 30 '23 at 01:09
Excellent. I got it to work in this short example I gave. I'm going to see if i can get it to work in the more complex thing I am working on. Thanks for the help. – gbrother54 Mar 30 '23 at 01:20

Petar · Answer 2 · 2023-03-30T00:42:06.683

-2

.then takes a callback function with the result (resolve of promise) as a paramater

createPromise.then(res => dontDoUntilDelayIsComplete())

edited Mar 30 '23 at 00:42

answered Mar 30 '23 at 00:38

Petar

13
5

This does not seem to have anything to do with the problem in the question which is: *I want the "dontDoUntilDelayIsComplete" function to run AFTER the "delayGreet" function.* – jfriend00 Mar 30 '23 at 00:43
`dontDoUntilDelayIsComplete` **is** a function - `.then(dontDoUntilDelayIsComplete)` is fine – Bergi Mar 30 '23 at 00:47

Javascript: how to get one function to run after another completes

2 Answers2