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 

}

Я хотел бы вызвать функцию clock () каждые 60 секунд для отображения времени на странице, но в то же время я хотел бы вызывать функцию serverTime () каждые 5 минут, чтобы сравнивать значения и принимать значение serverTime, если они не совпадают.

Вызов часов () каждые 60-е не проблема. setInterval решит эту проблему, но если я установлю интервал в 5 минут, то каждые 10 секунд будет устанавливаться новый 5-минутный интервал?

Большое спасибо за вашу помощь.

Answer 1

Вы рекурсивно устанавливаете интервалы:

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

Таким образом, каждый раз, когда вы звоните clock (каждую минуту), вы устанавливаете все больше и больше интервалов для clock и ну пустая функция. (Похоже, вы забыли попытаться позвонить serverTime?)

Если вы хотите звонить clock каждые 60 секунд, то просто установите интервал для его вызова каждые 60 секунд:

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

setInterval(clock, 60000);

Если вы хотите вызывать serverTime каждые 5 минут, то просто установите интервал для его вызова каждые 5 минут:

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

setInterval(serverTime, 300000);

Нет необходимости делать это рекурсивно. Это означает, что установка интервала является частью повторяемой операции, а это не то, что вам нужно.

Редактировать: Чтобы продемонстрировать проблему, посмотрите Консоль браузера по этой ссылке: https://jsfiddle.net/Laqt4oe5 Сколько раз вы ожидаете, что число будет увеличиваться каждые 3 секунды? Сколько раз это на самом деле увеличивается?

Answer 2

Я использовал это, чтобы решить проблему и получить то, что хотел

/ ** * Показать цифровые часы * * @param {string} container - размещение часов на странице * /

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