Разрешить веб-сайту реагировать на запросы при выполнении команд document.inner HTML

Question

Вкратце, у меня есть файл javascript, который вставляет HTML в файл HTML. Пользователь выбирает дату из указателя даты, и файл CSV читается. Каждая строка, которая содержит дату, выбранную из datepicker, затем выводится, как показано ниже:

let messageCode = `
     <div class="row msg_container base_sent">
          <div class="col-md-10 col-xs-10">
                <div class="messages msg_sent">
                       <p>${message}</p>
                       <time datetime="2009-11-13T20:00">${user} • ${time}</time>
                </div>
          </div>
    </div>
   `;

container.innerHTML += messageCode;

Однако часто требуется вывести около 2000 сообщений. Это приводит к тому, что пользователю иногда приходится ждать 45 секунд после выбора даты из datepicker.

Мне интересно, есть ли способ, которым я могу выполнить инъекцию HTML, позволяя пользователю прокручивать . Таким образом, пользователь может почти прокрутить страницу вниз, пока вводится HTML.

Answer 1

Попробуйте обернуть задачу поиска CSV в функцию async и await возвращенные результаты перед внедрением в DOM.

Любой код за пределами вашей функции async будет выполнен, и ваша innerHTML инъекция будет запущена, как только ваш поиск ожидает возврата.

Answer 2

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

Там есть плагины, которые помогают с рендерингом больших данных, но на данный момент я не могу придумать ни одного, но сообщу вам, как только сделаю это.

Надеюсь, это поможет вам.