JavaScript Async - Avoiding State With Yield
Written by Ian Elliot   
Monday, 30 March 2020
Article Index
JavaScript Async - Avoiding State With Yield
Pi Yield

Pi Yield

The is more to say about the whole subject of generators and yield, but this is enough for us to write a version of the Pi program that makes use of the system to save its state. Notice that we can now use the natural for loop and we don't have to make any extra effort to break the program up or save state – we simply have to call yield at suitable intervals:

function* genComputePi() {
 var k;
 var pi = 0;
 for (k = 1; k <= 10000000; k++) {
  pi += 4 * Math.pow(-1, k + 1) / (2 * k - 1);
  if (Math.trunc(k / 1000) * 1000 === k) yield pi;
 }
 return pi;
}

The if statement checks to see if k is divisible by 1000 which results in yield being called every 1000 iterations.

Using this version of the function is slightly more difficult because we have to use the generator to create an iterator that we can call next on:

function computePiAsync() {
 var computePi = genComputePi();
var pi;
function resume() {
pi = computePi.next();
result.innerHTML = pi.value;
if (!pi.done) setTimeout(resume, 0);
return;
}
setTimeout(resume, 0);
return;
}

Notice that apart from having to create computePi and make use of next to resume the function this is very like the way that we made use of setTimeout before – except we no longer have to save and use the state information – the system does this for us.

If you are using yield you might as well use postMessage instead of setTimeout as it is likely to be supported by any browser that supports yield:

function computePiAsync() { 
var computePi = genComputePi();
var pi;
window.addEventListener("message",resume, false);
function resume() {
pi = computePi.next();
result.innerHTML = pi.value;
if (!pi.done)
window.postMessage("fireEvent", "*");
return;
}
window.postMessage("fireEvent", "*");
return;
}

Notice that in all of these cases closure is being used to allow the inner functions access to the variables of the outer functions.

async

Summary

  • If you need to make your own long running functions non-blocking then you can either use another thread or split the computation into short sections.

  • Threads are more powerful, but not all browsers support them and they can be difficult to implement.

  • The basic idea in creating a non-blocking function without threads is to make them run in small chunks of time, releasing the UI thread often enough to keep the UI responsive.

  • The main problem is is to keep the state of the computation so that it can be resumed after it has released the UI thread.

  • In most cases you need to write the function using a state object to record the important information so that the function resumes from where it left off.

  • To schedule the next run of the function you can use setTimeout or postMessage to place the function on the event queue.

  • An alternative way to keep the state of the function is to write it as a generator and use the yield instruction to pause the function and next to resume it.

  • If you use yield the system will look after the state for you and you can even pause for loops and generally write the function without having to worry about restoring state.

 

Now Available as a Print Book:

 JavaScript Async

cover

You can buy it from: Amazon

Contents

  1. Modern JavaScript (Book Only)
  2. Events,Standard & Custom
  3. The Callback
      extract - The Callback & The Controller
  4. Custom Async - setTimeout, sendMessage & yield
      extract - Custom Async
      extract - Avoiding State With Yield 
  5. Worker Threads
      extract - Advanced Worker Threads 
  6. Consuming Promises 
  7. Producing Promises
      extract - The Revealing Constructor Pattern
     
    extract - Composing Promises 
  8. The Dispatch Queue
      extract - Microtasks
  9. Async & Await
      extract -  Basic Async & Await
      extract -  DoEvents & Microtasks 
  10. Fetch, Cache & Service Worker
      extract - Fetch  
      extract - Cache
     
    extract -  Service Workers ***NEW

Also by Ian Elliot 
Just JavaScript: An Idiomatic Approach
Just jQuery: The Core UI 
Just jQuery: Events, Async & AJAX  

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on, Twitter, Facebook or Linkedin.

square

 



 

Comments




or email your comment to: comments@i-programmer.info

<ASIN:1871962560>

<ASIN:1871962579>

 <ASIN:1871962528>

<ASIN:1871962501>



Last Updated ( Monday, 30 March 2020 )