{"id":66205,"date":"2024-12-27T03:01:00","date_gmt":"2024-12-26T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=66205"},"modified":"2025-01-12T12:48:17","modified_gmt":"2025-01-12T02:48:17","slug":"javascript-microtask-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-microtask-primer-tutorial\/","title":{"rendered":"Javascript Microtask Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/using_queue_microtask.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript Microtask Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/using_queue_microtask.jpg\" title=\"Javascript Microtask Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Javascript Microtask Primer Tutorial<\/p><\/div>\n<p>Javascript, in &#8220;clientside mode&#8221;, has many more <a target=\"_blank\" title='Asynchronous information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Asynchrony_(computer_programming)' rel=\"noopener\">asynchronous<\/a> ideas than it used to, say, a decade ago, where it was mainly setTimeout and setInterval timer functions we turned to, in this regard.  It used to be that any idea of &#8220;waiting for JS&#8221; was not on, but that does not have to be the case with the modern web browsers using &#8220;modern Javascript&#8221;.  Today, for example, we&#8217;ve written a &#8220;proof of concept&#8221; web application making use of &#8230;<\/p>\n<p><code><br \/>\n<a target=\"_blank\" title='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/HTML_DOM_API\/Microtask_guide' href='\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/HTML_DOM_API\/Microtask_guide' rel=\"noopener\">queueMicrotask<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; with accompanying description &#8230;<\/p>\n<blockquote cite='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/HTML_DOM_API\/Microtask_guide'><p>\nA microtask is a short function which is executed after the function or program which created it exits and only if the JavaScript execution stack is empty, but before returning control to the event loop being used by the user agent to drive the script&#8217;s execution environment.\n<\/p><\/blockquote>\n<p> &#8230; which, as you may surmise, allows for a &#8220;jumping order of execution&#8221; paradigm with your Javascript.<\/p>\n<p>The example code of <a target=\"_blank\" title='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/HTML_DOM_API\/Microtask_guide' href='\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/HTML_DOM_API\/Microtask_guide' rel=\"noopener\">the queueMicrotask informational webpage<\/a> made us happy, thanks, and so we wrapped that into a &#8220;shell of user usage&#8221; by &#8230;<\/p>\n<ul>\n<li>writing code in PHP &#8230; <font size=1>huh?!<\/font> &#8230; so that &#8230;<\/li>\n<li>we can use navigation via an HTML form method=POST &#8230; allowing for large amounts of user written Javascript code they want to dynamically execute &#8230; and &#8230;<\/li>\n<li>as we mentioned with the recent <a target=\"_blank\" title='PHP Tokeniser Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-tokeniser-primer-tutorial\/' rel=\"noopener\">PHP Tokeniser Primer Tutorial<\/a> talking about &#8220;code as content, teamed with navigation using this code data&#8221; &#8230;\n<ol>\n<li>we leave using Javascript window.<a target=\"_blank\" title='Javascript btoa information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/met_win_btoa.asp' rel=\"noopener\">btoa<\/a> &#8230;<br \/>\n&lt;?php echo &#8221;<br \/>\n<code><br \/>\n  function doit(tdiho) {<br \/>\n    document.getElementById('jcode').value=window.btoa(tdiho.innerText);<br \/>\n    document.getElementById('mysub').click();<br \/>\n  }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<br \/>\n &#8230; hanging off an HTML td <a target=\"_blank\" title='Global contenteditable attribute information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp' rel=\"noopener\">contenteditable<\/a>=true onblur event logic idea &#8230; and &#8230;<\/li>\n<li>arrive back using PHP <a target=\"_blank\" title='PHP base64_encode information' href='http:\/\/php.net\/manual\/en\/function.base64-decode.php' rel=\"noopener\">base64_decode<\/a> &#8230;<br \/>\n&lt;?php<br \/>\n<code><br \/>\n  if (isset($_POST['jcode'])) {<br \/>\n    $thejcode=base64_decode($_POST['jcode']);<br \/>\n  }<br \/>\n<\/code><br \/>\n?&gt;\n<\/li>\n<\/ol>\n<p> &#8230; so as &#8230;\n<\/li>\n<li>to better handle the transference of real &#8220;+&#8221; characters in your data (as code is apt to have)<\/li>\n<\/ul>\n<p> &#8230; as you can see using today&#8217;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/using_queue_microtask.php_GETME\" rel=\"noopener\">proof of concept<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/using_queue_microtask.php\" rel=\"noopener\">queueMicrotask using web application<\/a> you can also try below &#8230;<\/p>\n<p><iframe src=\"\/\/www.rjmprogramming.com.au\/using_queue_microtask.php\" style=\"width:100%;height:750px;\"><\/iframe><\/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='#d66205' onclick='var dv=document.getElementById(\"d66205\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/task\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d66205' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Javascript, in &#8220;clientside mode&#8221;, has many more asynchronous ideas than it used to, say, a decade ago, where it was mainly setTimeout and setInterval timer functions we turned to, in this regard. It used to be that any idea of &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-microtask-primer-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":[12,14,37],"tags":[1614,3697,1580,4286,218,2442,290,2380,400,2325,5038,452,576,2469,652,1830,5036,830,860,2076,932,997,2357,2679,5037,1125,1126,2359,1581,3565,1855,1282,1319,4525,4483],"class_list":["post-66205","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-asynchronous","tag-base64_decode","tag-cell","tag-clientside","tag-code","tag-contenteditable","tag-data","tag-delay","tag-event","tag-execution","tag-execution-order","tag-form","tag-html","tag-innertext","tag-javascript","tag-method","tag-microtask","tag-navigation","tag-onblur","tag-order","tag-php","tag-programming","tag-promise","tag-queue","tag-queuemicrotask","tag-setinterval","tag-settimeout","tag-sleep","tag-table-cell","tag-target","tag-task","tag-timer","tag-tutorial","tag-wait","tag-window-btoa"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/66205"}],"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=66205"}],"version-history":[{"count":16,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/66205\/revisions"}],"predecessor-version":[{"id":66521,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/66205\/revisions\/66521"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=66205"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=66205"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=66205"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}