0

Could I please ask for help in understanding how to use Async\Await to help keep a page more responsive?

I have read the accepted reply here: If async-await doesn't create any additional threads, then how does it make applications responsive? and I thought I understood it.

I have a page with a button and a checkbox. The checkbox does nothing, it is just there for me to check and uncheck. I want to start a long running function on the button press and keep the UI responsive so that I can check and uncheck the checkbox to prove that the UI is still responsive. Should that be possible with Async/Await?

I have a long running function like so (takes about 4 seconds to complete):

async BigFunction()
  {
    var r = 0;

    for(var i = 0; i < 10000; i++)
    {
      for(var j = 0; j < 1000; j++)
      {
        for(var k = 0; k < 1000; k++)
        {
          r = Math.sin(4);
        }
      }
    }
    
    return r;
  }

My on button pressed hander is as so:

OnPressed(): void {
    (async () => {
     
      await this.BigFunction();
      return 1;
    })();
  }

I thought that this would be enough (from my understanding of the post in the above link) to keep the UI responsive. It is not. My checkbox is unresponsive while the long running function executes.

Thanks for any help with a solution.

Here is a passage from the above link that made me think this would work:

What the await keyword, together with some clever compiler magic, does is that it basically something like "Ok, you know what, I'm going to simply return from the button click event handler here. When you (as in, the thing we're waiting for) get around to completing, let me know because I still have some code left to execute". So it returns back to the message loop, which is now free to continue pumping messages, like moving the window, resizing it, or clicking other buttons.

user3738290
  • 445
  • 3
  • 16
  • 1
    `await` is not spawning a new thread to execute stuff in the background, that's just not how it works. If your function is *hogging the thread*, then it's hogging the thread, and there's nothing `async`/`await` can do about that. See the abovelinked duplicate. – deceze Sep 06 '21 at 10:25
  • Your link is referring to the C# async/await. That is a completely different language. You shouldn't assume it works the same on JavaScript. – Ivar Sep 06 '21 at 10:25
  • 1
    The main point of the answer that you've duped is, Javascript is single-threaded, but you have two tools to get around this: web workers, or settimeout. – TKoL Sep 06 '21 at 10:26
  • As @TKoL mentioned Web Workers are a great option to run heavy functions. As it is run on a separate thread than the UI thread it wont block the UI. – Dan Philip Bejoy Sep 06 '21 at 10:29
  • Thanks. I see my error. I was working under the misapprehension that the link was discussing JavaScript. So I have to use a Web Worker or settimeout. (I spend most of my time in C# and thanks to your replies now appreciate the difference of Async\Await in JavaScript). – user3738290 Sep 06 '21 at 10:39

0 Answers0