Какой лучший способ загрузить много строк текста в HTML (построчно каждые 60 секунд)?

Question

У меня есть страница для просмотра моего сайта.

У меня основной текст по центру меняется каждые 60 секунд.

У меня есть примерно 150+ отдельных строк текста, каждую из которых я хочу, чтобы страница пролистывалась.

Как лучше всего загрузить эти строки текста?

т.е.

1 на 1

Загрузить их из другого файла?

Просто хотелось бы наиболее эффективный способ загрузки текста.

var divs = $('div[id^="content-"]').hide(),
  i = 0;

(function cycle() {

  divs.eq(i).fadeIn(2000)
    .delay(60000) // 1000 is 1 second
    .fadeOut(2000, cycle);

  i = ++i % divs.length;

})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content-1">text 1</div>
<div id="content-2">text 2</div>
<div id="content-3">text 3</div>
<div id="content-4">text 4</div>
<div id="content-5">text 5</div>
<div id="content-6">text 6</div>
<div id="content-7">text 7</div>
......
<div id="content-180">text 180</div>

Answer 1

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

var lines = [
    "Text line 1",
    "Text line 2",
    "etc"
];

var div = $('div[id="content"]');
var i = 0;

(function cycle() {

  div
    .text(lines[i])
    .fadeIn(2000)
    .delay(60000) // 1000 is 1 second
    .fadeOut(2000, cycle);

  i = ++i % lines.length;

})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content"></div>

Answer 2

Это можно сделать с помощью одного текстового элемента, который циклически изменяет свое содержимое с интервалом в 1 секунду. Обратите внимание, что я использую оператор модуля, чтобы пропустить цикл по массиву (в противном случае вы можете остаться с неопределенным, когда число превысило массив длина.

Обратите внимание, что вы можете установить это как переменную, а затем использовать clearInterval (variable); остановить велосипед.

У меня также нет анимации затухания, но шапка должна быть легко включаемой.

var content = ['This is text content 1',' This is another text  content', 'I am also a text content']; 
let contentLength = content.length;
let count=0;

function contentDisplay (){
   document.querySelector('#content').innerText = content[count % contentLength];
  count++;
}

// sets the initial display
contentDisplay();

// sets the interval to change the display
setInterval(contentDisplay, 1000);

#content {
  text-align: center;
  padding: 15px;
  font-size: 20px
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="content">text 1</p>

Answer 3

async/await - хороший шаблон для использования.

var arr = ["foo","bar","test"];

function oneSecond() {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('resolved');
        }, 1010);
    });
}
async function writeToDom(arr) {
    console.log("beginning write");
    for (var i = 0; i < arr.length; i++) {
        await oneSecond();
        console.log(arr[i]);
    }
    console.log("done.");
}
writeToDom(arr);