{"id":33668,"date":"2017-10-13T03:01:00","date_gmt":"2017-10-12T17:01:00","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=33668"},"modified":"2017-10-12T13:04:02","modified_gmt":"2017-10-12T03:04:02","slug":"javascript-promises-object-and-async-genericization-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-promises-object-and-async-genericization-tutorial\/","title":{"rendered":"Javascript Promises Object and async Genericization Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/promises_test.htm?video=y\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript Promises Object and async Genericization Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/promises_test_generic.jpg\" title=\"Javascript Promises Object and async Genericization Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript Promises Object and async Genericization Tutorial<\/p><\/div>\n<p>Today, we&#8217;re pulling together two recent threads of blog posting ideas &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Promise object' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Promise'>Promise<\/a> object &#8230; and &#8230;<\/li>\n<li><a target=_blank title='async explained well by David Walsh, thanks' href='https:\/\/davidwalsh.name\/async-await'>async<\/a> (and <a target=_blank title='await explained well by David Walsh, thanks' href='https:\/\/davidwalsh.name\/async-await'>await<\/a>)<\/li>\n<\/ul>\n<p> &#8230; both controllers of &#8220;asynchronicity in web application&#8221; tools, building on yesterday&#8217;s <a title='Javascript async and await Primer Tutorial' href='#jpt'>Javascript async and await Primer Tutorial<\/a>.  They are being pulled together by &#8220;genericization&#8221; principles we&#8217;ve introduced today to an &#8230;<\/p>\n<ul>\n<li>HTML <i>form<\/i> element navigation based user interactional functionality addition &#8230; displayed up (near the top of) the form (so not interfered with by the &#8220;log&#8221; data) via &#8230;<\/li>\n<li>HTML5 <a target=_blank title='HTML5 details information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_details.asp'><i>details<\/i><\/a> and <i>summary<\/i> <a target=_blank title='Reveal blog postings at this blog' href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal\">&#8220;reveal&#8221;<\/a> methodologies<\/li>\n<\/ul>\n<p> &#8230; the latter of which, ever since discovering not so long ago, has been our favourite &#8220;reveal&#8221; tool when functionality is optional.  And here&#8217;s the thing about web design.  A very important early thing to want to know about any web application &#8220;point of interest&#8221; is whether it is part of the &#8220;backbone&#8221; or &#8220;main web flow&#8221; of the web application, or is it <i>optional<\/i> functionality.  Today&#8217;s additional HTML <i>form<\/i> based navigational functionality is optional, and so we start the ball rolling with its access taking up very little &#8220;screen space&#8221; but the beauty of the <i>details<\/i> and <i>summary<\/i> &#8220;team&#8221; is that their use can allow for a &#8220;reveal&#8221; blossoming out of functionality, especially functionality of some complexity taking up a lot of &#8220;screen space&#8221;.<\/p>\n<p>Perhaps it will surprise you to peruse the amended HTML and Javascript you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/promises_test.html---GETME\" title=\"promises_test.htm\">promises_test.htm<\/a> with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/promises_test.html---GETME\" title=\"promises_test.htm\">these changes<\/a> how much changed to introduce this genericity and user interactional control &#8220;feel&#8221;.  So how was this genericization approach tackled?   As per our usual &#8220;genericization drive&#8221; approach, and which we don&#8217;t try very often for web applications that don&#8217;t feel like &#8220;tools&#8221;, we go about doing this by &#8230;<\/p>\n<ul>\n<li>identify hardcodings regarding URLs (that go into HTML element src= or href= attributes), HTML element titles and HTML media element MIME types<\/li>\n<li>change those hard codings into Javascript global var<font size=1>iables<\/font> &#8230; which can pick up their content (or be derivable from earlier ones), even before the document.body <i>onload<\/i> event &#8230;<\/li>\n<li>Javascript global var<font size=1>iables<\/font> can be initiated by Javascript code working off a GET (? and &amp;) URL exemplified by &#8230;<br \/>\n<code><br \/>\nvar mediaurl2=location.search.split('mediaurl2=')[1] ? decodeURIComponent((location.search.split('mediaurl2=')[1]).split('&')[0]) : '\/\/www.rjmprogramming.com.au\/Mac\/ImageFit_Paintbrush.m4v#t=4';<br \/>\n<\/code><br \/>\n &#8230; to feed into the execution of either of the two scenarios &#8230;<\/p>\n<ol>\n<li>media run (using async and await and Promises object via Ajax and IFRAME) &#8230; <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/promises_test.htm?waiturl1=%2F%2Fwww.rjmprogramming.com.au%2FHTMLCSS%2Fsleep.php%3Fn%3D1&#038;waiturl2=%2F%2Fwww.rjmprogramming.com.au%2FHTMLCSS%2Fsleep.php%3Fn%3D0&#038;geturl1=%2F%2Fwww.rjmprogramming.com.au%2FPHP%2Faustralian_lighthouses.php%23selsort&#038;geturl2=%2F%2Fwww.rjmprogramming.com.au%2FHTMLCSS%2Fdams_usa.htm&#038;geturl3=%2F%2Fwww.rjmprogramming.com.au%2FHTMLCSS%2Fsleep.php%3Fn%3D75&#038;mediaurl1=%2F%2Fwww.rjmprogramming.com.au%2FPHP%2Fmacbetha1s1.m4v&#038;mediaurl2=%2F%2Fwww.rjmprogramming.com.au%2FPHP%2Fmacbetha1s1.m4a%23t%3D0&#038;gettitle1=Lighthouses+in+Australia&#038;gettitle2=Dams+in+the+USA&#038;async=Play+Media\">like this mix of video and audio example<\/a><\/li>\n<li>(web) application run (via Promises object via Ajax and IFRAME) &#8230; <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/promises_test.htm\">like this<\/a><\/li>\n<\/ol>\n<p> &#8230; and user controllable via &#8230;\n<\/li>\n<li>HTML <i>form<\/i> element method=GET action=.\/promises_test.htm (back to self) navigational data presentation that defaults to our blog posting defaults from recent times, and hiding the &#8220;sleep&#8221; methods used (and that probably won&#8217;t work with URLs not using the rjmprogramming.com.au domain) &#8230; and which only shows (&#8220;blossoms&#8221;) when &#8230;<\/li>\n<li>HTML <i>details<\/i> and <i>summary<\/i> is clicked by the user (who isn&#8217;t a robot)<\/li>\n<\/ul>\n<p>The relevant <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/promises_test.htm?video=y\">media live run<\/a> link and\/or <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/promises_test.htm\">web application live run<\/a> remain as the means to access that user interactional control functionality, and encourage the more intrepid users to give these ideas an &#8220;interactive go&#8221;.<\/p>\n<p><b><i>Did you know?<\/i><\/b><\/p>\n<p>A way to &#8220;partition&#8221; two (or more) strands of functionality presented on the one HTML form method=GET element, but with multiple input type=submit buttons in play is to provide a <i>name=<\/i> attribute to just one of those two input type=submit buttons, and that way back at the callback functionality it can differentiate via the existance, or not, of that input type=submit <i>name=<\/i> attribute in the URL GET (? and &amp;) arguments via that <i>location.search<\/i> type code talked about above.<\/p>\n<hr>\n<p id='jpt'>Previous relevant <a target=_blank title='Javascript async and await Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-async-and-await-primer-tutorial\/'>Javascript async and await Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/promises_test.htm?video=y\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript async and await Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/async_await.jpg\" title=\"Javascript async and await Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript async and await Primer Tutorial<\/p><\/div>\n<p>Related Javascript asynchronous functionality to that of <a title='Promise All Object Tutorial' href='#paot'>Promise All Object Tutorial<\/a>&#8216;s <a target=_blank title='Promise object' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Promise'>Promise<\/a> object is <a target=_blank title='async explained well by David Walsh, thanks' href='https:\/\/davidwalsh.name\/async-await'>async<\/a> and <a target=_blank title='await explained well by David Walsh, thanks' href='https:\/\/davidwalsh.name\/async-await'>await<\/a> Javascript keywords.<\/p>\n<p>As you can see in our David Walsh inspired Javascript function introduced into the Promise object code of recent times &#8230;<\/p>\n<p><code><br \/>\n\/\/ Would take only 5000ms total!<br \/>\n<b>async<\/b> function parallel() {<br \/>\n  const wait1 = get('\/\/www.rjmprogramming.com.au\/HTMLCSS\/sleep.php?n=5');<br \/>\n  const wait2 = get('\/\/www.rjmprogramming.com.au\/HTMLCSS\/sleep.php?n=4');<br \/>\n  <i>await<\/i> wait1;<br \/>\n  <i>await<\/i> wait2;<br \/>\n  return \"done!\";<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; the <b>async<\/b> keyword changes the modus operandi of the Javascript function it modifies, giving that Javascript function asynchronous capabilities, and the <i>await<\/i> keyword kicks off (those) asynchronous &#8220;definitions of tasks to do&#8221;.<\/p>\n<p>In addition, we have introduced a <i>second<\/i> timer via <a target=_blank title='Javascript setTimeout method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp'><i>setTimeout<\/i><\/a> so that the user can see what we do in context, and what we do today with this <b>async<\/b> and <i>await<\/i> &#8220;framework&#8221; is to play the same video twice, the second playing delayed by, as you may have guessed by now, 4 seconds.  Why 4 seconds?  As with all event-driven programming enthusiasts, you look for &#8220;intervention&#8221; (of code, via event) opportunities, and as you can see from the <b>async<\/b> and <i>await<\/i> &#8220;framework&#8221; code above, there is bound to be an intervention point as the PHP  <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/sleep.php_GETME\">sleep.php<\/a> invocation of lesser duration (rather than first!), ends.<\/p>\n<p>In working this &#8220;duelling videos&#8221; in synchronicity idea, we discovered (via <a target=_blank title='Useful link' href='https:\/\/stackoverflow.com\/questions\/5981427\/start-html5-video-at-a-particular-position-when-loading'>this useful link<\/a>, thanks) a cute <font color=red><b>#t=[seconds]<\/b><\/font> syntax we hadn&#8217;t used to start a homegrown <a target=_blank href='https:\/\/www.w3schools.com\/html\/html5_video.asp' title='HTML video element information from w3schools'>video<\/a> and\/or <a target=_blank href='https:\/\/www.w3schools.com\/html\/html5_audio.asp' title='HTML audio element information from w3schools'>audio<\/a> at a specified time position, and shown at the <font color=red>&#8220;event intervention&#8221;<\/font> place of code &#8230;<\/p>\n<p><code><br \/>\nfunction get(url) {<br \/>\n  \/\/ Return a new promise.<br \/>\n  return new Promise(function(resolve, reject) {<br \/>\n    \/\/ Do the usual XHR stuff<br \/>\n    var req = new XMLHttpRequest();<br \/>\n    req.open('GET', url);<br \/>\n<b><\/b><br \/>\n    req.onreadystatechange = function () {<br \/>\n    \/\/document.title='' + req.readyState + ' ' + req.status;<br \/>\n    if (req.readyState == 4 && req.status == 200) {<br \/>\n      console.log(req.responseText);<br \/>\n      if (cell.indexOf(\"centre\") == -1) {<br \/>\n      document.getElementById(cell).innerHTML=req.response;<br \/>\n      if (req.response.indexOf('ighthous') != -1 || damdone) {<br \/>\n      adate=new Date();<br \/>\n      document.getElementById('middle').innerHTML+=adate.toLocaleString() + '&lt;br&gt;' + 'australian_lighthouses.php Ajax response&lt;br&gt;&lt;br&gt;';<br \/>\n      document.getElementById('hmiddle').innerHTML+=adate.toLocaleString() + '&lt;br&gt;' + 'australian_lighthouses.php Ajax response&lt;br&gt;&lt;br&gt;';<br \/>\n      adate=new Date();<br \/>\n      document.getElementById('hmiddle').innerHTML+=adate.toLocaleString() + '&lt;br&gt;' + 'australian_lighthouses.php IFRAME src&lt;br&gt;&lt;br&gt;';<br \/>\n      if (1 == 1) {<br \/>\n      document.getElementById('h' + cell).innerHTML+='&lt;iframe id=\"i' + cell + '\" onload=\"ldone(' + \"'australian_lighthouses.php'\" + ');\" style=\"display:none;width:800px;float:left;height:900px;\" src=\"\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php#selsort\" title=\"Lighthouses in Australia\"&gt;&lt;\/iframe&gt;';<br \/>\n      } else {<br \/>\n      document.getElementById('h' + cell).innerHTML+='&lt;iframe onload=\"ldone(' + \"'australian_lighthouses.php'\" + ');\" style=\"width:800px;float:left;height:900px;\" src=\"\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php#selsort\" title=\"Lighthouses in Australia\"&gt;&lt;\/iframe&gt;';<br \/>\n      }<br \/>\n<b><\/b><br \/>\n      } else {<br \/>\n      adate=new Date();<br \/>\n      document.getElementById('middle').innerHTML+=adate.toLocaleString() + '&lt;br&gt;' + 'dams_usa.htm Ajax response&lt;br&gt;&lt;br&gt;';<br \/>\n      document.getElementById('hmiddle').innerHTML+=adate.toLocaleString() + '&lt;br&gt;' + 'dams_usa.htm Ajax response&lt;br&gt;&lt;br&gt;';<br \/>\n      damdone=true;<br \/>\n<b><\/b><br \/>\n      wis='' + eval(eval(window.getComputedStyle(document.getElementById(cell), null).getPropertyValue(\"width\").replace('px','')) - 0) + 'px';<br \/>\n      adate=new Date();<br \/>\n      if (document.getElementById('hmiddle').innerHTML == \"\") document.getElementById('hmiddle').innerHTML=document.getElementById('middle').innerHTML;<br \/>\n      document.getElementById('hmiddle').innerHTML+=adate.toLocaleString() + '&lt;br&gt;' + 'dams_usa.htm IFRAME src&lt;br&gt;&lt;br&gt;';<br \/>\n      if (1 == 1) {<br \/>\n      document.getElementById('h' + cell).innerHTML+='&lt;iframe id=\"i' + cell + '\" onload=\"ldone(' + \"'dams_usa.htm'\" + ');\" style=\"display:none;width:' + wis + ';float:left;height:900px;\" src=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/dams_usa.htm\" title=\"Dams in the USA\"&gt;&lt;\/iframe&gt;';<br \/>\n      } else {<br \/>\n      document.getElementById('h' + cell).innerHTML+='&lt;iframe onload=\"ldone(' + \"'dams_usa.htm'\" + ');\" style=\"width:' + wis + ';float:left;height:900px;\" src=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/dams_usa.htm\" title=\"Dams in the USA\"&gt;&lt;\/iframe&gt;';<br \/>\n      }<br \/>\n      }<br \/>\n      if (cell == \"right\") {<br \/>\n      cell=\"centre\";<br \/>\n      } else {<br \/>\n      cell=\"right\";<br \/>\n      }<br \/>\n      } else {<br \/>\n      adate=new Date();<br \/>\n      if (cell == 'centre') {<br \/>\n      document.getElementById('middle').innerHTML+=adate.toLocaleString() + '&lt;br&gt;' + 'sleep.php?n=75 Ajax response&lt;br&gt;&lt;br&gt;';<br \/>\n      document.getElementById('hmiddle').innerHTML+=adate.toLocaleString() + '&lt;br&gt;' + 'sleep.php?n=75 Ajax response&lt;br&gt;&lt;br&gt;';<br \/>\n\t  document.getElementById('ileft').style.display='block';<br \/>\n\t  document.getElementById('iright').style.display='block';<br \/>\n\t  } else {<br \/>\n      document.getElementById('hmiddle').innerHTML+=adate.toLocaleString() + '&lt;br&gt;' + 'sleep.php?n=' + cell.replace('centre','') + ' Ajax response&lt;br&gt;&lt;br&gt;';<br \/>\n      <font color=red>if (cell.indexOf('4') != -1) {<br \/>\n      <\/font><font color='orange'>document.getElementById('hleft').innerHTML='&lt;video controls=\"controls\" onended=\"atend(this);\" autoplay=\"autoplay\" id=\"vleft\"&gt;&lt;source id=\"vsource\" src=\"\/\/www.rjmprogramming.com.au\/Mac\/ImageFit_Paintbrush.m4v<b>#t=4<\/b>\" type=\"video\/mp4\"&gt;&lt;\/source&gt;&lt;\/video&gt;'; <\/font><font color='red'><br \/>\n      document.getElementById('hright').innerHTML='&lt;video controls=\"controls\" onloadstart=\"atstart(this);\" onended=\"atend(this);\"  autoplay=\"autoplay\" id=\"vright\"&gt;&lt;source src=\"\/\/www.rjmprogramming.com.au\/Mac\/ImageFit_Paintbrush.m4v<b>#t=4<\/b>\" type=\"video\/mp4\"&gt;&lt;\/source&gt;&lt;\/video&gt;';<br \/>\n      }<\/font><br \/>\n      cell=cell.replace('centre4','centre05').replace('centre5','centre04').replace('centre0','centre');<br \/>\n\t  }<br \/>\n      }<br \/>\n    }<br \/>\n    };<br \/>\n<b><\/b><br \/>\n    \/\/ Handle network errors<br \/>\n    req.onerror = function() {<br \/>\n      reject(Error(\"Network Error\"));<br \/>\n    };<br \/>\n<b><\/b><br \/>\n    \/\/ Make the request<br \/>\n    req.send();<br \/>\n  });<br \/>\n<\/code><\/p>\n<p>To wind up the &#8220;information flow&#8221; we gave the videos <a target=_blank title='Event onended information from w3schools' href='https:\/\/www.w3schools.com\/Jsref\/event_onended.asp'><i>onended<\/i><\/a> event places, thanks to <a target=_blank title='Useful link' href='https:\/\/stackoverflow.com\/questions\/2741493\/detect-when-an-html5-video-finishes'>this webpage&#8217;s advice<\/a>, thanks, to say when the videos finish, with its imperfect synchronicity, but &#8220;often will be to the same second&#8221; timer time.<\/p>\n<p>Here is the amended HTML and Javascript you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/promises_test.html--GETME\" title=\"promises_test.htm\">promises_test.htm<\/a> and here is <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/promises_test.html--GETME\" title=\"promises_test.htm\">what changed for async and await usage<\/a>.  The relevant <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/promises_test.htm?video=y\">live run<\/a> link is here<font size=1>, or is that there<\/font>.<\/p>\n<p><b><i><font color='orange'>Stop Press<\/font><\/i><\/b><\/p>\n<p>We found we could improve &#8220;imperfect synchronicity&#8221; by effectively resetting the &#8220;earlier started&#8221; video at the same time the delayed video starts.<\/p>\n<hr>\n<p id='paot'>Previous relevant <a target=_blank title='Promise All Object Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/promise-all-object-tutorial\/'>Promise All Object Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/promises_test.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Promise All Object Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/promises_test_all.jpg\" title=\"Promise All Object Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Promise All Object Tutorial<\/p><\/div>\n<p>Building on yesterday&#8217;s <a title='Promise Object Primer Tutorial' href='#popt'>Promise Object Primer Tutorial<\/a> start to the <a target=_blank title='Promise object' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Promise'>Promise<\/a> object asynchronous processing research we are up to, we move on to try <a target=_blank title='Another useful David Walsh webpage, thanks' href='https:\/\/davidwalsh.name\/promises'>David Walsh<\/a>&#8216;s Promise.all syntax &#8230;<\/p>\n<p><code><br \/>\nPromise.all([promise1, promise2]).then(function(results) { \/\/ method takes an array of promises and fires one callback once they are all resolved<br \/>\n\t\/\/ Both promises resolved<br \/>\n})<br \/>\n.catch(function(error) {<br \/>\n\t\/\/ One or more promises was rejected<br \/>\n});<br \/>\n<\/code><\/p>\n<p> &#8230; and can&#8217;t say that the new <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/promises_test.htm\">live run<\/a> followed into &#8220;bowels&#8221; of the flow of the syntax, but worked with what was tried, elsewhere, and kicked off with Promise.all and before we forget, none of this works in Internet Explorer.   And what was that &#8220;try&#8221; all about?  &#8220;Catch&#8221; this.  We load the 2 web applications last night asynchronously in Ajax (invisibly) and then onto IFRAME src= loading (also invisible), but add into the mix a PHP Ajax call (all encased within the Promise.all method syntax) that sleeps for 75 seconds.  The idea here is that it is only after all three web applications finish their Ajax we display those IFRAME elements made invisible earlier.  The user sees the Dams in the USA, now, only well into its long read of data with the progress bar showing a good amount of progress.  Note here, we don&#8217;t pretend just client solutions can really sleep, as PHP represents a server side solution to this sleep issue we started talking about yesterday.<\/p>\n<p>Here is the amended HTML and Javascript you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/promises_test.html-GETME\" title=\"promises_test.htm\">promises_test.htm<\/a> and here is <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/promises_test.html-GETME\" title=\"promises_test.htm\">what changed<\/a>.  Here is the very simple PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/sleep.php_GETME\">sleep.php<\/a> &#8230; <\/p>\n<p><code><br \/>\n&lt;?php if (isset($_GET['n'])) { sleep($_GET['n']); echo \"&lt;p&gt;Slept for \" . $_GET['n'] . \" seconds.&lt;\/p&gt;\"; } else {   sleep(20); echo \"&lt;p&gt;Slept for 20 seconds.&lt;\/p&gt;\";   } ?&gt;<br \/>\n<\/code><\/p>\n<p>You can also see this play out at WordPress 4.1.1&#8217;s <a target=_blank  href='https:\/\/www.rjmprogramming.com.au\/ITblog\/promise-all-object-tutorial\/'>Promise All Object Tutorial<\/a>.<\/p>\n<hr>\n<p id='popt'>Previous relevant <a target=_blank title='Promise Object Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/promise-object-primer-tutorial\/'>Promise Object Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/promises_test.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Promise Object Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/promises_test.jpg\" title=\"Promise Object Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Promise Object Primer Tutorial<\/p><\/div>\n<p>The <a target=_blank title='Promise object' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Promise'>Promise<\/a> Javascript object opens up methods where you, as a web application client side programmer, can end up with a single var<font size=1>iable<\/font> approach to the management of asynchronous processes &#8230;<\/p>\n<p><img src='\/\/cdn.rawgit.com\/Vectaio\/a76330b025baf9bcdf07cb46e5a9ef9e\/raw\/26c4213a93dee1c39611dcd0ec12625811b20a26\/js-promise.svg' title='Diagram thanks to https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Promise'><\/img><\/p>\n<p> &#8230; but the use of this can&#8217;t hide the issue of what to do with client side logic to do nothing, what we think of as &#8220;sleep&#8221; in those &#8220;reject&#8221; parts of the diagram above.<\/p>\n<p>We&#8217;ve started our journey of understanding, with inspiration from <a target=_blank title='Useful link, thanks' href='http:\/\/www.html5rocks.com\/en\/tutorials\/es6\/promises\/#toc-promisifying-xmlhttprequest'>this useful link<a> (and <a target=_blank title='Another useful David Walsh webpage, thanks' href='https:\/\/davidwalsh.name\/promises'>this one<\/a>), thanks, of  <a target=_blank title='Promise object' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Promise'>Promise<\/a> Javascript object by doing the <b>document.body onload event loaded<\/b> &#8230;<\/p>\n<p><code><br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\nvar lleft=false, lright=false, cell=\"left\", damdone=false;<br \/>\nvar wis, adate;<br \/>\n<b><\/b><br \/>\n<b><\/b><br \/>\n\/\/ From Jake Archibald's Promises and Back:<br \/>\n\/\/ http:\/\/www.html5rocks.com\/en\/tutorials\/es6\/promises\/#toc-promisifying-xmlhttprequest<br \/>\n<b><\/b><br \/>\nfunction get(url) {<br \/>\n  \/\/ Return a new promise.<br \/>\n  return new Promise(function(resolve, reject) {<br \/>\n    \/\/ Do the usual XHR stuff<br \/>\n    var req = new XMLHttpRequest();<br \/>\n    req.open('GET', url);<br \/>\n<b><\/b><br \/>\n    req.onreadystatechange = function () {<br \/>\n    \/\/document.title='' + req.readyState + ' ' + req.status;<br \/>\n    if (req.readyState == 4 && req.status == 200) {<br \/>\n      console.log(req.responseText);<br \/>\n      document.getElementById(cell).innerHTML=req.response;<br \/>\n      if (req.response.indexOf('ighthous') != -1 || damdone) {<br \/>\n      adate=new Date();<br \/>\n      document.getElementById('middle').innerHTML+=adate.toLocaleString() + '&lt;br&gt;' + 'australian_lighthouses.php Ajax response&lt;br&gt;&lt;br&gt;';<br \/>\n      document.getElementById('hmiddle').innerHTML+=adate.toLocaleString() + '&lt;br&gt;' + 'australian_lighthouses.php Ajax response&lt;br&gt;&lt;br&gt;';<br \/>\n      adate=new Date();<br \/>\n      document.getElementById('hmiddle').innerHTML+=adate.toLocaleString() + '&lt;br&gt;' + 'australian_lighthouses.php IFRAME src&lt;br&gt;&lt;br&gt;';<br \/>\n      document.getElementById('h' + cell).innerHTML+='&lt;iframe onload=\"ldone(' + \"'australian_lighthouses.php'\" + ');\" style=\"width:800px;float:left;height:900px;\" src=\"\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php#selsort\" title=\"Lighthouses in Australia\"&gt;&lt;\/iframe&gt;';<br \/>\n      } else {<br \/>\n      adate=new Date();<br \/>\n      document.getElementById('middle').innerHTML+=adate.toLocaleString() + '&lt;br&gt;' + 'dams_usa.html Ajax response&lt;br&gt;&lt;br&gt;';<br \/>\n      document.getElementById('hmiddle').innerHTML+=adate.toLocaleString() + '&lt;br&gt;' + 'dams_usa.html Ajax response&lt;br&gt;&lt;br&gt;';<br \/>\n      damdone=true;<br \/>\n      wis='' + eval(eval(window.getComputedStyle(document.getElementById(cell), null).getPropertyValue(\"width\").replace('px','')) - 0) + 'px';<br \/>\n      adate=new Date();<br \/>\n      if (document.getElementById('hmiddle').innerHTML == \"\") document.getElementById('hmiddle').innerHTML=document.getElementById('middle').innerHTML;<br \/>\n      document.getElementById('hmiddle').innerHTML+=adate.toLocaleString() + '&lt;br&gt;' + 'dams_usa.html IFRAME src&lt;br&gt;&lt;br&gt;';<br \/>\n      document.getElementById('h' + cell).innerHTML+='&lt;iframe onload=\"ldone(' + \"'dams_usa.html'\" + ');\" style=\"width:' + wis + ';float:left;height:900px;\" src=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/dams_usa.html\" title=\"Dams in the USA\"&gt;&lt;\/iframe&gt;';<br \/>\n      }<br \/>\n      cell=\"right\";<br \/>\n    }<br \/>\n    };<br \/>\n<b><\/b><br \/>\n    \/\/ Handle network errors<br \/>\n    req.onerror = function() {<br \/>\n      reject(Error(\"Network Error\"));<br \/>\n    };<br \/>\n<b><\/b><br \/>\n    \/\/ Make the request<br \/>\n    req.send();<br \/>\n  });<br \/>\n}<br \/>\n<b><\/b><br \/>\nfunction ldone(what) {<br \/>\n      adate=new Date();<br \/>\n      document.getElementById('hmiddle').innerHTML+=adate.toLocaleString() + '&lt;br&gt;' + what + ' IFRAME loaded&lt;br&gt;&lt;br&gt;';<br \/>\n}<br \/>\n<b><br \/>\nfunction ol() {<br \/>\nadate=new Date();<br \/>\ndocument.getElementById('middle').innerHTML+=adate.toLocaleString() + '&lt;br&gt;' + 'australian_lighthouses.php get()&lt;br&gt;&lt;br&gt;';<br \/>\ndocument.getElementById('hmiddle').innerHTML+=adate.toLocaleString() + '&lt;br&gt;' + 'australian_lighthouses.php get()&lt;br&gt;&lt;br&gt;';<br \/>\nget('\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php').then(function(response) {<br \/>\n  console.log(\"Success!\", response);<br \/>\n}, function(error) {<br \/>\n  console.error(\"Failed!\", error);<br \/>\n});<br \/>\n<\/b><b><br \/>\nadate=new Date();<br \/>\ndocument.getElementById('middle').innerHTML+=adate.toLocaleString() + '&lt;br&gt;' + 'dams_usa.html get()&lt;br&gt;&lt;br&gt;';<br \/>\ndocument.getElementById('hmiddle').innerHTML+=adate.toLocaleString() + '&lt;br&gt;' + 'dams_usa.html get()&lt;br&gt;&lt;br&gt;';<br \/>\nget('\/\/www.rjmprogramming.com.au\/HTMLCSS\/dams_usa.html').then(function(response) {<br \/>\n  console.log(\"Success!\", response);<br \/>\n}, function(error) {<br \/>\n  console.error(\"Failed!\", error);<br \/>\n});<br \/>\n<\/b><b><br \/>\n}<br \/>\n<\/b><br \/>\n&lt;\/script&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; asynchronous Ajax XMLHttpRequest() calls and follow this up with IFRAME src= calls, the difference being, the latter method loads any Javsacript and CSS styling in the &lt;head&gt;&lt;\/head&gt; tag whereas the former doesn&#8217;t.   We like the neatness of the syntax here, but still need those &#8220;reject&#8221; places to be able to effectively sleep to not overload your web browser with activity &#8230; and that&#8217;s where we&#8217;ll leave you with a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/promises_test.html\" title=\"Click picture\">live run<a\/> HTML and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/promises_test.html_GETME\">promises_test.html<\/a> source code link, thinking on that.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d33606' onclick='var dv=document.getElementById(\"d33606\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/asynchronous\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d33606' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d33632' onclick='var dv=document.getElementById(\"d33632\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/sleep\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d33632' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d33645' onclick='var dv=document.getElementById(\"d33645\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/synchronize\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d33645' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d33668' onclick='var dv=document.getElementById(\"d33668\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/genericization\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d33668' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Today, we&#8217;re pulling together two recent threads of blog posting ideas &#8230; Promise object &#8230; and &#8230; async (and await) &#8230; both controllers of &#8220;asynchronicity in web application&#8221; tools, building on yesterday&#8217;s Javascript async and await Primer Tutorial. They are &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-promises-object-and-async-genericization-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,12,14,37],"tags":[69,2360,1614,113,2361,2310,327,452,1839,1533,576,587,652,2363,932,2362,1988,997,2357,1063,1126,2359,1200,2311,1670,2005,1319,1369],"class_list":["post-33668","post","type-post","status-publish","format-standard","hentry","category-ajax","category-elearning","category-event-driven-programming","category-tutorials","tag-ajax","tag-async","tag-asynchronous","tag-audio","tag-await","tag-details","tag-did-you-know","tag-form","tag-genericization","tag-get","tag-html","tag-iframe","tag-javascript","tag-onended","tag-php","tag-play","tag-position","tag-programming","tag-promise","tag-reveal","tag-settimeout","tag-sleep","tag-stop-press","tag-summary","tag-synchronize","tag-tool","tag-tutorial","tag-video"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/33668"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=33668"}],"version-history":[{"count":12,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/33668\/revisions"}],"predecessor-version":[{"id":33680,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/33668\/revisions\/33680"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=33668"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=33668"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=33668"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}