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