在HTML中加载多行文本的最好方法是什么(每隔60秒逐行加载)？

Question

我的网站有一个显示页面。

我让主要的中心文本每60秒改变一次。

我有大致的150+文本行，我希望页面循环浏览每一行文本。

加载这些文本行的最佳方式是什么？

即

1 x 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

这可以通过一个文本元素以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 2

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

​

Answer 3

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>

​