Как выбрать определенную строку списка на основе времени в JavaScript, jQuery или Angular?

Оффтоп javascript
1

Привет всем! У меня возникла проблема с выбором нужной строки списка на основе времени воспроизведения аудио. Я получаю данные из JSON-файла и привязываю их к элементам списка. В JSON я добавил пару имя/значение для каждой строки в виде audioTime/“время в секундах”.

Использую медиа-плагин в приложении Cordova. Каждую секунду проверяю текущее время воспроизведения и пытаюсь выделить соответствующую строку списка. Вот примерный код:

setInterval(() => {
  this.плеер.получитьТекущееВремя().then((время) => {
    let строкаДляОбновления = 'Стр' + Math.floor(время);
    if (document.getElementById(строкаДляОбновления)) {
      document.getElementById(this.прошлаяСтрока).style.fontWeight = 'normal';
      document.getElementById(строкаДляОбновления).style.fontWeight = 'bold';
      // Прокрутка к выбранной строке
      this.прошлаяСтрока = строкаДляОбновления;
    }
  });
}, 1000);

Проблема в том, что иногда выбирается неправильная строка. Не могу понять, в чем дело. Может, есть другой способ решить эту задачу? Буду благодарен за любые идеи!

2

А вы пробовали использовать метод .closest() для поиска ближайшей строки по времени? Можно создать массив времен из JSON и найти ближайшее к текущему времени воспроизведения. Это должно быть точнее, чем просто округление. Еще стоит проверить, нет ли задержки между реальным временем аудио и тем, что возвращает плеер. Может, стоит добавить небольшой отступ?

3

Могу посоветовать использовать бинарный поиск вместо линейного перебора - это значительно ускорит работу на больших списках. Создайте отсортированный массив времен из JSON и применяйте бинпоиск для нахождения ближайшего значения. Еще попробуйте кэшировать DOM-элементы строк вместо постоянного вызова getElementById. И подумайте над использованием requestAnimationFrame вместо setInterval для более плавного обновления. Это должно улучшить производительность.