Question

我有以下代码，它使用一个文本数组来更改span中的文本：

＆＃13;

var texts = ["Hola", "Bonjour", "Hallo"];
var count = 0;

function changeText() {
  $("#example").text(texts[count]);
  count < 3 ? count++ : count = 0;
}
setInterval(changeText, 500);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="font-size: 50px;">
  Say <span id="example">hello</span> :-)
  <br />
  <br />
</div>
<div id="show" runat="server" clientidmode="Static" style="display: none;">
test
</div>

＆＃13;

此函数在连续循环中循环遍历数组。有没有办法循环遍历数组一次，并以原始＆＃34; Hello＆＃34;结束，并在＆＃34; Hello＆＃34;上一次，显示＆＃34;： - ）＆＃34 ;最后还显示带有id＆＃34;显示＆＃34;的div。最后？

Answer 1

完成循环后，请清除间隔。

＆＃13;

var texts = ["Hola", "Bonjour", "Hallo", "Hello"];
var count = 0;

function changeText() {
  $("#example").text(texts[count]);
  count < 3 ? count++ : reset();
}

function reset(){
  clearInterval(interval);
  $("#example").text($("#example").text()+" :-)");
  $("#show").show();
}
var interval = setInterval(changeText, 500);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="font-size: 50px;">
  Say <span id="example">Hello</span>
  <br />
  <br />
</div>
<div id="show" runat="server" clientidmode="Static" style="display: none;">
test shown at end
</div>

＆＃13;

Answer 2

当循环次数为4且setInterval()

时，清除使用clearInterval()设置的计时器

var texts = ["Hola", "Bonjour", "Hallo", "hello"];
var count = 0;
var interval = "";
function changeText() {
  $("#example").text(texts[count]);
  count < 4 ? count++ : stopLoop();
}
interval = setInterval(changeText, 500);

function stopLoop() {
  clearInterval(interval)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="font-size: 50px; ">
  Say <span id="example">hello</span> :-)
  <br />
  <br />
</div>

Answer 3

清除间隔并使最后一个文本具有：）

var texts = ["Hola", "Bonjour", "Hallo :-)"];
var count = 0;
var tId;
function changeText() {
  if (count >= 3) {
    clearInterval(tId);
    $("#show").show();
  }  
  else $("#example").text(texts[count]);
  count++;
}
tId = setInterval(changeText, 500);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="font-size: 50px;">
  Say <span id="example">hello</span>
  <br />
  <br />
</div>
<div id="show" style="display: none;">
test
</div>

Answer 4

我不建议使用setInterval。
如果您可以使用lodash，请使用_.delay函数。否则使用setTimeout函数。为简单起见，我将使用下面的setTimeout函数。

var texts = ["Hola", "Bonjour", "Hallo", "Hello :-)"];
var count = 0;

function changeText() {
    $("#example").text(texts[count]);
    if (count === (texts.length - 1)) {
        $("#show").css("display", "inline-block");
    } else {
        $("#show").css("display", "none");
    }
    setTimeout(function () {
        count = (count < texts.length) ? count + 1 : 0;
        changeText();
    }, 1000);
}

$(document).ready(function () {
    changeText();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="font-size: 50px;">
  Say <span id="example"></span>
  <br />
  <br />
</div>
<div id="show" style="display: none;">
test
</div>

如何使用间隔更改文本

4 个答案: