Почему неправильно работает код js в мобильной версии?

Question

[nastinapetrova555]

Добрый день! У меня стояла задача написать код, который бы каждый день выводил на страницу цитату из массива, число и месяц которой являются ближайшими к сегодняшней дате. То есть год написания цитаты нужно игнорировать. Например, если есть цитата 3.09.1954 и 16.09.1916, то вывелась бы вторая, тк 16 сентября ближе к 14 сентября. Код написала, в десктопе все работает, а вот в мобильной версии код почему-то всегда выдает последнюю цитату в массиве, какая бы дата там ни стояла. С чем это может быть связано?

<div class="quote">Привет, я какая-то цитата</div>

// массив цитат
const quoteCollection = [
  {id: 0, date: '1919-06-01 00:54:23', source: '1 июня 1919', 
  text: 'Цитата 1'},
  {id: 1, date: '1916-08-04 00:54:48', source: '4 августа 1916', 
  text: 'Цитата 2'},
  {id: 2, date: '1916-09-09 03:54:48', source: 'Явление Луны, 9 сентября 1914', 
  text: 'Цитата 3'},
  {id: 3, date: '1946-11-07 00:55:51', source: 'Памяти Александра Блока, 7 ноября 1946', 
  text: 'Цитата 4'},
  {id: 4, date: '1916-12-12 00:56:20', source: '12 декабря 1916', 
  text: 'Цитата 5'},
  {id: 5, date: '1946-05-13 00:56:44', source: '«Наяву», 13 мая 1946', 
  text: 'Цитата 6'},
  {id: 6, date: '1916-02-18 00:57:50', source: '18 февраля 1916', 
  text: 'Цитата 7'},
];

const updateQuote = () => {
    let quote = document.querySelector('.quote');

    const now = Date.parse(new Date());  // текущая дата в миллисекундах
    const currentYear = new Date().getFullYear(); 
    const diffArray = []; 

    // пушим в массив данные
    quoteCollection.map(item => {
        const newDateQuote = currentYear + item.date.slice(4); // месяц, дата и время от цитаты + текущий год
        const difference = Math.abs(now - Date.parse(newDateQuote)); // разница в миллисекундах
        diffArray.push(difference);
    });

    // находим минимальное значение в массиве и его идентификатор
    const findMinValue = (arr) => {
        let min = {};
        for (let i = 0; i < arr.length; i++) {
            if (i === 0) {
                min.id = i;
                min.value = arr[i];
            }
            else if (arr[i] > min.value) {
                continue;
            } else {
                min.id = i;
                min.value = arr[i];
            }
        };
        return min;
    }
    const minValue = findMinValue(diffArray);
    const minQuoteId = minValue.id;

    // подгружаем ближайшую цитату
    quote.innerHTML = `${quoteCollection[minQuoteId].text}<br><br><b>${quoteCollection[minQuoteId].source}</b>`;
 
};

updateQuote();
setInterval(updateQuote, 6000000);

В десктопе показывает Цитату 3, тк датируется сентябрем, а вот в мобиле просто проследнюю всегда выдает

Answer 1

[SvoekoshinFA]

У меня не получилось воссоздать проблему на телефоне, но попробуй вот этот код

// массив цитат
const quoteCollection = [
  {id: 0, date: '1919-06-01 00:54:23', source: '1 июня 1919', 
  text: 'Цитата 1'},
  {id: 1, date: '1916-08-04 00:54:48', source: '4 августа 1916', 
  text: 'Цитата 2'},
  {id: 2, date: '1916-09-09 03:54:48', source: 'Явление Луны, 9 сентября 1914', 
  text: 'Цитата 3'},
  {id: 3, date: '1946-11-07 00:55:51', source: 'Памяти Александра Блока, 7 ноября 1946', 
  text: 'Цитата 4'},
  {id: 4, date: '1916-12-12 00:56:20', source: '12 декабря 1916', 
  text: 'Цитата 5'},
  {id: 5, date: '1946-05-13 00:56:44', source: '«Наяву», 13 мая 1946', 
  text: 'Цитата 6'},
  {id: 6, date: '1916-02-18 00:57:50', source: '18 февраля 1916', 
  text: 'Цитата 7'},
];

const updateQuote = () => {
  const quote = document.querySelector('.quote');
  const now = new Date();

  const soon = quoteCollection
    .map(item => {
      // создаем копию элемента
      const newItem = { ...item };
      // меняем у даты год на текущий и записываем в копию
      newItem.date = new Date(Date.parse(item.date)).setFullYear(now.getFullYear());
      return newItem;
    })
    // сортируем так чтобы в начале был самый близкий по времени елемент
    .sort((a, b) => Math.abs(a.date - now) - Math.abs(b.date - now))
    // возвращаем первый елемент массива
    .shift();

  quote.innerHTML = `${soon.text}<br><br><b>${soon.source}</b>`;

};

updateQuote();
setInterval(updateQuote, 6000000);

Comments

[nastinapetrova555]

Все равно почему-то не срабатывает...в эмуляции с компьютера все хорошо, он показывает 9 сентября, а именно если с телефона смотреть, то теперь вместо последнего просто первый элемент показывает. Вот скрин прикрепила

[SvoekoshinFA]

У меня получилось воссоздать проблему.
Проблема возникает только на iOS потому что iOS по другому обрабатывает даты.

при попытке Date.parse() он возвращает "Invalid Date"

Вот этот код должен работать правильно.

// массив цитат
const quoteCollection = [
  {id: 0, date: '1919-06-01 00:54:23', source: '1 июня 1919', 
  text: 'Цитата 1'},
  {id: 1, date: '1916-08-04 00:54:48', source: '4 августа 1916', 
  text: 'Цитата 2'},
  {id: 2, date: '1916-09-09 03:54:48', source: 'Явление Луны, 9 сентября 1914', 
  text: 'Цитата 3'},
  {id: 3, date: '1946-11-07 00:55:51', source: 'Памяти Александра Блока, 7 ноября 1946', 
  text: 'Цитата 4'},
  {id: 4, date: '1916-12-12 00:56:20', source: '12 декабря 1916', 
  text: 'Цитата 5'},
  {id: 5, date: '1946-05-13 00:56:44', source: '«Наяву», 13 мая 1946', 
  text: 'Цитата 6'},
  {id: 6, date: '1916-02-18 00:57:50', source: '18 февраля 1916', 
  text: 'Цитата 7'},
];

const updateQuote = () => {
  const quote = document.querySelector('.quote');
  const now = new Date();

  const soon = quoteCollection
    .map(item => {
      // создаем копию элемента
      const newItem = { ...item };
      // меняем у даты год на текущий и записываем в копию
      newItem.date = new Date(item.date.split(' ')[0]).setFullYear(now.getFullYear());
      return newItem;
    })
    // сортируем так чтобы в начале был самый близкий по времени елемент
    .sort((a, b) => Math.abs(a.date - now) - Math.abs(b.date - now))
    // возвращаем первый елемент массива
    .shift();

  quote.innerHTML = `${soon.text}<br><br><b>${soon.source}</b>`;

};

updateQuote();
setInterval(updateQuote, 6000000);

[nastinapetrova555]

SvoekoshinFA, Спасибо большое, сработало! а как вы поняли, в чем проблема? есть какая-то программа на компе, которая эмулирует разные системы, чтобы консоль посмотреть, или вы просто по очереди методы в гугл забивали?)

[SvoekoshinFA]

Я на скриншоте увидел что вы пробуете через iPhone и решил проверить на своём устройстве.
А потом, я просто вывел на печать даты по которым должно сортироваться, и увидел что они все одинаковые.

[nastinapetrova555]

SvoekoshinFA, Спасибо, добрый человек