Javascript 满足某些条件时重新加载页面的功能是无限重新加载页面

Question

所以我对 JavaScript 和一般的网络开发还很陌生。如果出现以下情况，我正在尝试编写重新加载网页的脚本：

一个。文件“forum.html”已更新

和

b。名为“聊天”的文本框不为空。

虽然这听起来很简单，但我已经设法以某种方式稍微超越了自己的头脑。该脚本似乎按照其设计的目的进行操作。首先。但是不知何故，自己陷入了重新加载地狱的狂怒之中，并在尝试（我假设）无限次重新加载页面后使网页无法使用。

我会把脚本留在这里：

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);

Answer 1

while(0 == 0)是一个永不终止的繁忙循环，而setTimeout不会阻塞它，它只是在后台启动一个计时器。使用 a promise-based sleep with async/await 代替：

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();
  }
}

阅读更多关于 async/await here

Answer 2

您使用 setTimeout 的方式不起作用。 setTimeout 是一个异步工作的函数。空的timer 函数在过期时间后执行，没有别的。 while循环也有关系。

阅读更多关于承诺、同步和异步模式的信息，以更好地理解如何组织代码。

总的来说，这应该是一个 interval，即定期再次轮询文件并将其与原始文件进行比较。 interval 类似于 timeout，但它会在特定时间间隔到期后重复执行。

我不确定 IfElse 函数是做什么用的，我暂时忽略了它，但解决方案可能如下所示。

解决方案

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 满足某些条件时重新加载页面的功能是无限重新加载页面

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

javascript

function

reload