不同时间的 setInterval() 内的 SetInterval()

Question

我想问一下，如何每 60 秒运行一个函数，其中有另一个计时器，它每 5 分钟运行一次

function systemTime() {
  let currentTime = new Date();
  let diem = "AM";
  let h = currentTime.getHours();
  let m = currentTime.getMinutes();
  let s = currentTime.getSeconds();

  if (h == 0) h = 12;
  if (h > 12) diem = "PM";
  if (h < 10) h = "0" + h;
  if (m < 10) m = "0" + m;
  if (s < 10) s = "0" + s;

  return {
     h: h.toString(),
     m: m.toString(),
     diem: diem
  }
}


async function serverTime() {
  let timeUrl = 'https://worldtimeapi.org/api/timezone/Europe';
  let response = await fetch(timeUrl);
  let data = await response.json();

  let timestamp = data.datetime;
  let time = timestamp.split('T')[1].split('.')[0];
  let timeArray = time.split(':');
  if(parseInt(timeArray[0]) > 12) timeArray[2] = 'PM'
  else timeArray[2]  = 'AM';

  return {
    h: timeArray[0],
    m: timeArray[1],
    diem: timeArray[2]
  }
}

async function clock() {
  let h, m, diem;
  let container = document.querySelector('#displayClock');
  container.innerHTML = `${h} : ${m}`;
  setInterval(() => clock(), 60000);
  // I would like to grab the server time every 5 min for comparison
  setInterval(() => {}, 60000*5) // set minutes and hours to the server time 

}

我想每 60 秒调用一次 clock() 函数以在页面上显示时间，但同时我想每 5 分钟调用一次 serverTime() 函数来比较值并获取 serverTime 如果它们不一样。

每 60 秒调用一次 clock() 不是问题。 setInterval 会解决这个问题，但如果我在其中设置了 5 分钟的间隔，那么每 10 秒就会设置一个新的 5 分钟间隔？

非常感谢您的帮助。

Answer 1

您正在递归地设置间隔：

async function clock() {
  //...
  setInterval(() => clock(), 60000);
  setInterval(() => {}, 60000*5);
}

因此，每次您调用clock（每分钟）时，您都会为clock 以及一个空函数设置越来越多的间隔。 （您好像忘记尝试拨打serverTime？）

如果你想每 60 秒调用一次clock，那么只需设置一个间隔以每 60 秒调用一次：

async function clock() {
  //...
}

setInterval(clock, 60000);

如果你想每 5 分钟调用一次serverTime，那么只需设置一个间隔，每 5 分钟调用一次：

async function serverTime() {
  //...
}

setInterval(serverTime, 300000);

无需递归执行此操作。这样做意味着 设置间隔 是重复操作的一部分，这不是您想要的。

编辑：为了演示这个问题，请在此链接上查看您的浏览器控制台：https://jsfiddle.net/Laqt4oe5您预计该数字每 3 秒增加多少次？实际增加了多少倍？

Answer 2

我已经用它来解决问题并获得我想要的东西

/** * 显示数字时钟 * * @param {string} 容器 - 在页面上放置时钟 */

function systemTime() {
    let currentTime = new Date();
    let diem = "AM";
    let h = currentTime.getHours();
    let m = currentTime.getMinutes();
    let s = currentTime.getSeconds();

    if (h == 0) h = 12;
    if (h > 12) diem = "PM";
    if (h < 10) h = "0" + h;
    if (m < 10) m = "0" + m;
    if (s < 10) s = "0" + s;

    return {
        h: h.toString(),
        m: m.toString(),
        diem: diem
    }
}

/**
 * Returns an object containing hours and minutes from the worldTimeAPI
 */
async function serverTime() {
    let timeUrl = 'https://worldtimeapi.org/api/timezone/Europe/Berlin';
    let response = await fetch(timeUrl);
    let data = await response.json();

    let timestamp = data.datetime;
    let time = timestamp.split('T')[1].split('.')[0];
    let timeArray = time.split(':');
    if(parseInt(timeArray[0]) > 12) timeArray[2] = 'PM'
    else timeArray[2]  = 'AM';

    console.log('Time fetched from world API');

    return {
        h: timeArray[0],
        m: timeArray[1],
        diem: timeArray[2]
    }
}

/**
 * Fires every 5 min and compares server and system times
 */
async function compareTime() {
    let server = await serverTime();
    let system = systemTime();
    let container = document.querySelector('#displayClock');
    if(system.h != server.h || system.m != server.m) container.innerHTML = `${server.h} : ${server.m} ${server.diem}`;
    else container.innerHTML = `${system.h} : ${system.m} ${system.diem}`;
    setInterval(() => compareTime(), 60000);
}

/**
 * Fires every 1 min and displays system time
 */
function displayTime() {
    let system = systemTime();
    let h = system.h;
    let m = system.m;
    let diem = system.diem;
    let container = document.querySelector('#displayClock');
    container.innerHTML = `${h} : ${m} ${diem}`;
    setInterval(() => displayTime(), 60000);
}