OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to pause javascript code execution until fetch() actually gets the file

  • Thread starter Thread starter HolyResistance
  • Start date Start date
H

HolyResistance

Guest

The Scenario​


Let's say the progression of tasks is triggered with a window load like this,

Code:
window.addEventListener("load", doTheseFirst, { once: true });

function doTheseFirst()
{
  // Show some pictures and play some sounds for 3 seconds
  setTimeout(thenDoThese, 3000);
}

function thenDoThese()
{
  // Show other pictures and play other sounds for 5 seconds
  setTimeout(andThenDoTheseToo, 5000);
}

function andThenDoTheseToo()
{
  // Maybe display some kind of option which will
  // allow the user to choose how to proceed further
  someButtonElement.addEventListener("click", whenButtonIsClicked);
}

function whenButtonIsClicked()
{
  // etc etc
  // You get the idea
}

And let's say we have a fetch() that fires practically at the same time with either window load or the addition of the event listener.
An example of which could look like this,

Code:
fetch("somefolder/notification.txt").then(function(response){return response.text();}).then(function(contentOfTheTxtFile){ /*What to do when the file is ready*/ });
// Assume that download speed is unpredictable
window.addEventListener("load",function(){   doTheseFirst();   }, { once: true });
// ...
// ...

In this case the time of completion for fetch() is totally UNCERTAIN i.e. we do not know at what exact moment fetch() will actually get the file. Therefore the situation resembles a moment like the one seen in the image,

setTimeout versus fetch

And yet what if we must PAUSE the task chain as soon as fetch() is done and ready with the file and then UNPAUSE it after some kind of dialog box or notification msg is displayed.

The easy solution for that is using an alert box since it blocks/pauses the code execution automatically and respects the remaining milliseconds in whichever setTimeout was ticking at that moment. The following code makes the alert box pop up as soon as fetch() gets the content from the txt file. Recall that fetch() and window load are working independently.

Code:
fetch("somefolder/notification.txt").then(function(response){return response.text();}).then(function(contentOfTheTxtFile){ alert(contentOfTheTxtFile); });

This works because when the alert box is closed, the main code goes back to its normal flow with a perfect UNPAUSING effect, just as needed.

So the question is,​

How do we do the same thing without using a crude alert box that we cannot assign any styles to? Can we make it so that the code execution is paused as soon as fetch() gets the file and then it is unpaused immediately once the user clicks something like an OK or NEXT button?

In other words, is it possible to mimic the behavior of alert() ?



NOTICE: This particular research has been initiated during the development of SPEAKWORLDLANGUAGES app

<h4>The Scenario</h4>
<p>Let's say the progression of tasks is triggered with a <code>window</code> <code>load</code> like this,</p>
<pre><code>window.addEventListener("load", doTheseFirst, { once: true });

function doTheseFirst()
{
// Show some pictures and play some sounds for 3 seconds
setTimeout(thenDoThese, 3000);
}

function thenDoThese()
{
// Show other pictures and play other sounds for 5 seconds
setTimeout(andThenDoTheseToo, 5000);
}

function andThenDoTheseToo()
{
// Maybe display some kind of option which will
// allow the user to choose how to proceed further
someButtonElement.addEventListener("click", whenButtonIsClicked);
}

function whenButtonIsClicked()
{
// etc etc
// You get the idea
}
</code></pre>
<p>And let's say we have a <code>fetch()</code> that fires practically at the same time with either <code>window</code> <code>load</code> or the addition of the event listener.<br>An example of which could look like this,</p>
<pre><code>fetch("somefolder/notification.txt").then(function(response){return response.text();}).then(function(contentOfTheTxtFile){ /*What to do when the file is ready*/ });
// Assume that download speed is unpredictable
window.addEventListener("load",function(){ doTheseFirst(); }, { once: true });
// ...
// ...
</code></pre>
<p>In this case the time of completion for <code>fetch()</code> is totally <em>UNCERTAIN</em> i.e. we do not know at what exact moment <code>fetch()</code> will actually get the file. Therefore the situation resembles a moment like the one seen in the image,</p>
<p><a href="https://i.sstatic.net/849AgeTK.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/849AgeTK.jpg" alt="setTimeout versus fetch" /></a></p>
<p>And yet <strong>what if</strong> we must <em>PAUSE</em> the task chain as soon as <code>fetch()</code> is done and ready with the file and then <em>UNPAUSE</em> it after some kind of dialog box or notification msg is displayed.</p>
<p>The easy solution for that is using an <code>alert</code> box since it blocks/pauses the code execution automatically and respects the remaining milliseconds in whichever <code>setTimeout</code> was ticking at that moment. The following code makes the <code>alert</code> box pop up as soon as <code>fetch()</code> gets the content from the <code>txt</code> file. Recall that <code>fetch()</code> and <code>window</code> <code>load</code> are working independently.</p>
<pre><code>fetch("somefolder/notification.txt").then(function(response){return response.text();}).then(function(contentOfTheTxtFile){ alert(contentOfTheTxtFile); });
</code></pre>
<p>This works because when the <code>alert</code> box is closed, the main code goes back to its normal flow with a perfect UNPAUSING effect, just as needed.</p>
<h4>So the question is,</h4>
<blockquote>
<p>How do we do the same thing without using a crude <code>alert</code> box that we cannot assign any styles to?
Can we make it so that the code execution is paused as soon as <code>fetch()</code> gets the file and then it is unpaused immediately once the user clicks something like an <strong>OK</strong> or <strong>NEXT</strong> button?</p>
</blockquote>
<p>In other words, is it possible to mimic the behavior of <code>alert()</code> ?</p>
<hr />
<p><em>NOTICE: This particular research has been initiated during the development of</em> <a href="https://speakworldlanguages.github.io/" rel="nofollow noreferrer">SPEAKWORLDLANGUAGES app</a></p>
 
Top