file browser

js/j14promise.php

<html>
 <head>
  <title> <?php echo basename(__file__, '.php'); ?> </title>
    <script type="text/javascript">
    const loopLimit = 3e9
    let checkAliveVal = 0;
    function checkAlive() {
      const bCheckAlive = document.getElementById('iCheckAlive');
      bCheckAlive.value = 'check Alive ' + ++checkAliveVal;
   }

   function loop() {
      const bLoop = document.getElementById('iLoop'), iMod = Math.floor(loopLimit / 100), st = Date.now();
      bLoop.value = 'looping';
      for (var i=0; i<loopLimit; i++) ;
        if ( i % iMod === 0) {
           bLoop.value = 'looping wait at ' + i.toExponential(2) + ' ela ' + (Date.now() - st) / 1000
        };
      bLoop.value = 'loop after ' + i.toExponential(2) + ' ela ' + (Date.now() - st) / 1000;;
   }

   function resolveAfter(res, ms) {
     return new Promise((resolve) => {
        setTimeout(() => {
          resolve(res);
        }, ms);
      });
    }

   async function loopWW() {
      const bLoWW = document.getElementById('iLoWW'), iMod = Math.floor(loopLimit / 100), st = Date.now()
      bLoWW.value = 'looping';

      for (var i=0; i<loopLimit; i++) 
        if ( i % iMod === 0) {
           bLoWW.value = 'looping wait at ' + i.toExponential(2) + ' ela ' + (Date.now() - st) / 1000
           await resolveAfter(0, 0)
        };
      bLoWW.value = 'loop with wait after ' + i.toExponential(2) + ' ela ' + (Date.now() - st) / 1000;
   }

  async function doPromise1(x) {
    const bPro1 = document.getElementById('iPromis1');
    if (x === undefined) 
      bPro1.value = 'Promise before ' + (x=10)
    if (x > 0) {
      bPro1.value += ' e' + x;
      y = doPromise1(x-1)
      bPro1.value += ' ' + x + '>' + y;
      return y
    } else {
      bPro1.value += ' await';
      bPro1.value = await resolveAfter('Promise after 3000', 3000);
      bPro1.value +=  ' ' + x + '>' + 1;
      return 1
    }
  }

  async function doPromiseR(x) {
    const bProR = document.getElementById('iPromisR');
    if (x === undefined) 
      bProR.value = 'Promise before ' + (x=10)
    if (x > 0) {
      bProR.value += ' e' + x;
      y = x * await doPromiseR(x-1)
      bProR.value += ' ' + x + '>' + y;
      return y
    } else {
      bProR.value += ' await';
      bProR.value = await resolveAfter('Promise after 3000', 3000);
      bProR.value +=  ' ' + x + '>' + 1;
      return 1
    }
  }

  async function doResolve(x) {
    const bDoRes = document.getElementById('iDoRes'),
       p = new Promise(async (resolve) => {
            this.state = 'pend';
            bDoRes.value = 'start of fun doResolve'
            await setTimeout(() => bDoRes.value = 'timeout after 2s', 2000)
            // throw new Error('throw error')
            await setTimeout(() => {resolve(p.val = 'resolve after second timeout' + (p.state = 'res').substring(99))}, 2000)
       });
       let m = ' p before ' + p + ' = ' + p.state + ': ' + p.val
       bDoRes.value += m + ' after await ' + await p + ' p after ' + p + ' = ' + p.state + ': ' + p.val
  }

   </script>
 </head>
<body>
<h1 >check it</h1>
<ul>
<li><input id='iCheckAlive' type="button" value="check Alive" onclick='checkAlive()'/> click here to see, if the window is responsive</li>
<li><input id='iLoop' type="button" value="loop" onclick='loop()'/> this is a hard loop, without return, so the browser never gets back to event loop and cannot update the diskplay</li>
<li><input id='iLoWW' type="button" value="loopWithWait" onclick='loopWW()'/> in this loop, we do a wait for 0 ms a hundred times, thus the window gets responsive then. However we are much slower ... </li>
<li><input id='iPromis1' type="button" value="Promise once" onclick='doPromise1()'/> however, an await does not store the stack, the async function just will return a promise ...</li>
<li><input id='iPromisR' type="button" value="Promise recursive" onclick='doPromiseR()'/> we have to do the awaits along the whole call chain ....</li>
<li><input id='iDoRes' type="button" value="Promise state" onclick='doResolve()'/> unfortunately a Promise does not offer access to the state, we have to do it ourself</li>
</ul>

<h1 id="src">Source <?php echo __file__; ?> </h1>
<?php highlight_file(__file__) ?>
 </body>
</html>