How to execute non-blocking statements in JavaScript?

Question

I'd like to execute a code (JavaScript, web) in the background that is non-blocking for the user. In other words, I want to call a function, but I don't want the following lines to wait for the call to finish, as it may last a while (and it not necessary for the rest of the program).

Maybe something like this:

function someBigFunctionIDontWantToWaitFor() {
  let i = 0;
  while (i < 100000000) {
    i++;
  }
  console.log("i =", i);
}

console.log("before call");
someBigFunctionIDontWantToWaitFor();
console.log("after call");

Obviously, in the console, I've this:

before call
100000000
after call

I'd like to have the following result:

before call
after call
100000000

Because someBigFunctionIDontWantToWaitFor takes time and the console.log("after call") doesn't want to wait.

Is this possible? Does it make sense?

Thank you

quickest way is doing setTimeout(() => someBigFunctionIDontWantToWaitFor(), 0); — makeitmorehuman, Jul 11 '22 at 10:02
except that still will block execution while it is running - so don't think this is a cure for code that is so intensive it blocks the browser — Jaromanda X, Jul 11 '22 at 10:03
The proper way would be to use Web Worker for browser and Worker Threads in nodejs — makeitmorehuman, Jul 11 '22 at 10:06

score -1 · Answer 1 · answered Jul 11 '22 at 10:36

You can put the function in a then block of a Promise.

async function someBigFunctionIDontWantToWaitFor() {
        let i = 0;
        while (i < 100000) {
            i++;
        }
        console.log("i =", i);
  }
  
  console.log("before call");
  Promise.resolve(undefined).then(someBigFunctionIDontWantToWaitFor)
  console.log("after call");

How to execute non-blocking statements in JavaScript?

1 Answers1