Question

我尝试在每次更改之间以1秒的间隔连续更改元素的文本。

问题在于它正在跳过中间变化，只是显示从元素的初始文本到最终文本的变化（＆＃39; text＆＃39; to＆＃39; text4＆＃39; as反对：＆＃39;文字＆＃39;文字2＆＃39;到＆＃39; text3＆＃39;到＆＃39; text4＆＃39;）。

为什么会发生这种情况以及如何避免？

setTimeout(
function() 
{
  $("#elementid").text("text2");
}, 1000);


setTimeout(
  function() 
  {
    $("#elementid").text("text3");
  }, 1000);  


  setTimeout(
  function() 
  {
    $("#elementid").text("text4");
  }, 1000);

Answer 1

那是因为你一次设置所有超时，在你设置它们的第二个之后完成。您将延迟更改为1000,2000,3000：

setTimeout(
    function() {
        $("#elementid").text("text2");
    }, 1000);


setTimeout(
    function() {
        $("#elementid").text("text3");
    }, 2000);


setTimeout(
    function() {
        $("#elementid").text("text4");
    }, 3000);

或嵌套它们：

setTimeout(
    function() {
        $("#elementid").text("text2");
        setTimeout(
            function() {
                $("#elementid").text("text3");
                setTimeout(
                    function() {
                        $("#elementid").text("text4");
                    }, 1000);
            }, 1000);
    }, 1000);

Answer 2

如果您可以使用Promises，那么我会建议您使用此代码段

const showTextWithDelay = (text, delay) => {
    return new Promise(resolve => {
        setTimeout(() => {
    	    $("#elementid").text(text);
            resolve();
        }, delay);
    })
};

showTextWithDelay("text1", 1000)
    .then(() => showTextWithDelay("text2", 1000))
    .then(() => showTextWithDelay("text3", 1000));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="elementid">---</div>

使用jQuery多次设置元素的文本时，跳过.setTimeouts跳转.setTimeouts的中间实例

2 个答案: