0

I am not able to understand grasp the process of sequentially running functions in JavaScript. I read many posts on this topic on stackoverflow, but they did not enlight me. Let us assume that we have two function fastFunction() and slowFunction(). When I run them one after the other JavaScript will not run them sequentially.

function fastFunction() {
    console.log('fast function!');
}

function slowFunction() {
    setTimeout(() => {console.log('slowFunction!')}, 1000);
}

slowFunction();
fastFunction();

I tried to use callbacks, promises and async/await syntax (see next example), but I am not able to get JavaScript to run these functions in sequential order. To be quite honest I still wonder why such a fundamental problem is that difficult to solve in JavaScript :D!

function fastFunction() {
    console.log('fast function!');
}

async function slowFunction() {
    let promise = new Promise((resolve, reject) => {
        setTimeout(() => {console.log('slowFunction!')}, 1000)});
    let result = await promise;
}

slowFunction().then(fastFunction())

I would be glad if anyone could explain me what I am doing wrong.

Edit: After suggestion of passing fastFunction() as callback (not sure if that is what the comment was suggesting), does not solve the problem.

function fastFunction() {
    console.log('fast function!');
}

function slowFunction(callback) {
    setTimeout(() => {
        console.log('slowFunction!');
        callback();
        }, 10000);
}

slowFunction(fastFunction);
MachineLearner
  • 805
  • 1
  • 8
  • 22
  • 2
    Your `fastFunction()` is invoking `fastFunction` immediately. Pass it as a callback instead `slowFunction().then(fastFunction)` – CertainPerformance Feb 22 '20 at 08:07
  • @CertainPerformance As far as I understood callbacks are the old way to solve this problem (I was not able to resolve this problem with callbacks ...) and async / await is the new way of solving this fundamental problem. I am so frustrated that I would also accept the callback solution. Could you tell me what I would need to modify in order to get the desired solution? – MachineLearner Feb 22 '20 at 08:10
  • 2
    Well, `.then` accepts a callback. It's Promise-based, which is better, but it still uses a callback. There's no way around that. Do what I said in the first comment and it'll work as desired – CertainPerformance Feb 22 '20 at 08:11
  • @CertainPerformance I am not sure how to modify the code to get what you said. I edited the code but it still fails to do what I want. Could you edit my last code section such that it works? – MachineLearner Feb 22 '20 at 08:19
  • 1
    Your new code is both omitting the Promise and it's *still* invoking `fastFunction` immediately. Just *pass* `fastFunction` as an argument - don't call it. See the code in my first comment – CertainPerformance Feb 22 '20 at 08:20
  • @CertainPerformance Thank you for you patience (this is the first time I work with JavaScript). If I change the last line to slowFunction(fastFunction) the fastFunction is not executed at all. – MachineLearner Feb 22 '20 at 08:27
  • 1
    Oh, you're creating a Promise, but you're never resolving it; the `promise` variable remains an unresolved Promise forever. See https://stackoverflow.com/questions/22519784/how-do-i-convert-an-existing-callback-api-to-promises - in order to promisify `setTimeout`, you need to call `resolve` inside `setTimeout`'s callback: `setTimeout(() => { console.log('slowFunction!') resolve(); }, 1000)` – CertainPerformance Feb 22 '20 at 08:32
  • @CertainPerformance Finally, I have a working solution! Thank you alot for your patience. I still think JavaScript should have a simpler solution to this problem without this complicated callback pattern. – MachineLearner Feb 22 '20 at 08:35

0 Answers0