TransWikia.com

Refresh/Retrigger "Fetch" in a HTML/javascript

Stack Overflow Asked by Sabrina S. on December 4, 2021

First things first: I don’t know anything about coding and I basically build my whole HTML file by CMD+C and CMD+V what I found with lots of Google searches and change just what is needed so it fits into what I intended. Interestingly I got a result that is 95% what I wanted.

Now I have just one last thing I can’t set (or find about in Google) so hopefully someone can answer it here. [Trying to put in as many information as I can]
I made a simple one page HTML that shows the date/time and plays an audio livestream from my PC when opened.

I also want it to display the "Now Playing" information. After a lot of searches, I finally found a solution that even I could make with Dreamweaver.
I used the "fetch script" (or is it called Fetch APP?) to get a txt file that my music player gives as output with the current song information. That fetch script get the data and put it into a
The problem is that is only seems to do it once at page load and not every few seconds. The contents in the txt change whenever a new song plays and I want the displayed data on the HTML to stay current as well.
So how do I set that fetch script to re-fetch the txt contents every ~10 seconds?

Here is my current fetch script:

<script>
var url = 'NowPlaying.txt';
var storedText;
    
fetch(url)
  .then(function(response) {
    response.text().then(function(text) {
      storedText = text;
      currentSong();
    });
  });

function currentSong() {
  document.getElementById('thesong').textContent = storedText;
}
</script>

For making my HTML I use "Dreamweaver 2019" on "Mac OS 11 Big Sur"
It’s a single HTML and all files/assets the HTML accesses (The Audio, Background Images and the TXT file are in the same directory/network)
I hope that provides all necessary details.

Oh and what I tried already is to copy the line "var t = setTimeout(fetch, 100);" into the script, because this seems to be what keeps the clock javascript current and I hoped it would do the same with fetch

Also attached a screenshot of the HTML "live" in chrome >> screenshot
As you can see, the bottom is supposed to have the "Now Playing" information displayed (please ignore that in this example the text is cut to the right, the current information is too long, so it cuts off at the end)

3 Answers

You can create a loop using setInterval function

var url = 'NowPlaying.txt';
var storedText;

setInterval(()=>{
  fetch(url)
    .then(function(response) {
      response.text().then(function(text) {
        storedText = text;
        currentSong();
      });
     });
},10000) // in miliseconds

function currentSong() {
  document.getElementById('thesong').textContent = storedText;
}

Answered by iKaio on December 4, 2021

You cam simply use setInterval to call your fetch every 10th seconds.

Just wrap your function in to a function and call that function in setInterval.

=> Also, at sometime if you would like to stop the fetch request on an event like a button click or something you can use clearInterval to stop the fetch request without refreshing the page.

Run snippet below to see the function is getting called every 10th seconds.

var url = 'NowPlaying.txt';
var storedText;

//10 Seconds fetch
function fetch10Seconds() {
  //Fetch
  fetch(url)
    .then(function(response) {
      response.text().then(function(text) {
        storedText = text;
        currentSong();
      });
    });
  console.log('Fetch again in 10 Seconds')
}

//Call function every 10 seconds
setInterval(fetch10Seconds, 10000); // 10 seconds are defined in miliseconds

//Call this on fetch every 10 seconds
function currentSong() {
  document.getElementById('thesong').textContent = storedText;
}

Answered by Always Helping on December 4, 2021

Try this:

function doFetch() {
  setTimeout(() => {
    fetch(url)
      .then(response => {
        response.text().then(text => {
          storedText = text;
          currentSong();
          doFetch();
        });
      });
  }, 10000);
}

doFetch();

This waits for the data to be fetched before waiting another 10 seconds and fetching again. Using setInterval will get the data every 10 seconds on the dot regardless of the success of the last run of the function.

Answered by see sharper on December 4, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP