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

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

加载HTML中的多行文本（每60秒一行）的最佳方法是什么？

3 个答案: