Javascript function to reload page if certain conditions are met is reloading page infinitely

Question

So I'm fairly new to JavaScript and web development in general. I'm trying to write a script which reloads the a webpage if:

a. the file "forum.html" has updated

and

b. The textbox named "chat" is not empty.

as easy as this sounds I've managed to somehow go over my own head a little. The script seems to do what its designed to do. At first. But then somehow sets itself in a fury of reloading hell, and leaves the webpage unusable after trying (I'm assuming) to reload the page infinitely many times.

I'll leave thew script here:

function timer() {
}

//rest time
setTimeout(timer, 10000);

function ifThen() {
  while (0 == 0) {
    setTimeout(timer, 1000);
    if (form.chat.value == "") {
      break;
    }
  }
}

function mything() {
  fetch('forum.html')
    .then(response => response.text())
    .then((data) => {
      setTimeout(timer, 7500);
      fetch('forum.html')
        .then(response => response.text())
        .then((data2) => {

          if (data !== data2) {
            setTimeout(ifThen, 100);
            location.reload();
          }
          delete(data2);
      })
      delete(data);
  })
}
setInterval(mything, 100);

@technophyle I've had my eyes on this little bugger. I've tried other permutations that do not include while but they were largely unsuccessful. — PixelBlurb, Nov 25 '20 at 20:21
I don't think this `setTimeout(timer, 7500);` is doing what you think it's doing. I think you are looking for `sleep(7500)` [See here for example](https://stackoverflow.com/questions/951021/what-is-the-javascript-version-of-sleep) — Liftoff, Nov 25 '20 at 20:22
@David JS has a sleep function? I've been looking around for this information and I can't find anything on javascript "sleep fucntion" — PixelBlurb, Nov 25 '20 at 20:23
I'm not super familiar with it myself, but it does exist. setTimeout is async, so it won't actually pause your execution. — Liftoff, Nov 25 '20 at 20:23
@PixelBlurb js has *not* a sleep function. `setTimeout` is like "sleep" — Marc, Nov 25 '20 at 20:23
You can emulate this with a setTimeout by using a promise, but setTimeout by itself will not pause the thread. — Liftoff, Nov 25 '20 at 20:24

score 1 · Answer 1 · answered Nov 25 '20 at 20:24

while(0 == 0) is a busy loop that never terminates, and setTimeout does not block it, it just starts a timer in the background. Use a promise-based sleep with async/await instead:

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

async function ifThen() {
  while (0 == 0) {
    await sleep(1000);
    if (form.chat.value == "") {
      break;
    }
  }
}

async function mything() {
  const res = await fetch('forum.html');
  const data = await res.text();
  setTimeout(timer, 7500);
  const res2 = await fetch('forum.html');
  const data2 = await res2.text();
  if (data !== data2) {
    await ifThen();
    location.reload();
  }
}

Read more about async/await here

You are right, main thread is not blocked. Because it is a micro task. — wasserholz, Nov 25 '20 at 20:46

wasserholz · Accepted Answer · 2020-11-25T20:52:27.820

The way you are using setTimeout does not work. setTimeout is an asynchronously working function. The empty timer function is executed after the expired time, nothing else. The while loop is also concerning.

Read more about promises, synchronous and asynchronous patterns, to better understand, how to organise the code.

Overall this should be a single interval, that is regularly polling the file again and comparing it to the original one. interval is like a timeout, but it is repeatedly executed, after the specific time interval has expired.

I am not sure, what the IfElse function is for, I ignored it for now, but the solution could look like this.

Solution

setTimeout(() => startCheck(7500), 10000);

function getData() {
  return fetch("forum.html");
}


async function startCheck(intervalMs) {
  const originalData = await getData();

  setInterval(async () => {
    const newData = await getData();
    
    if (originalData !== newData) {
      location.reload();
    }
  }, intervalMs);
}

Javascript function to reload page if certain conditions are met is reloading page infinitely

2 Answers2