Question

我有一个标签，通过jquery更改其内容，然后使用setInterval函数淡入淡出（使用velocity js库）。当我运行它时，它会在它开始出现故障之前正常工作约30秒，并且jquery在标签淡出之前开始更改标签的内容。

这是Javascript代码

let counter = 0;

function chooseWord() {
    let words = ["foo", "bar", "foo"];

    if (counter !== 2) {
        counter += 1;
    } else {
        counter = 0;
    }

    return words[counter];
}

function refreshText() {
    $("#div").text("Foo " + chooseWord())
        .velocity("fadeIn", {
            duration: 2500
        })
        .velocity("fadeOut", {
            delay: 1500,
            duration: 2500
        });
}

$(document).ready(function() {
    refreshText();

    setInterval(function() {
        refreshText();
    }, 7000);
});

这是我正在使用的标签

<h1 class="foobar" id="div"></h1>

我尝试过使用Jquery的计时器，我遇到了同样的问题。有谁知道问题可能是什么，或者可能以不同的方式实现我想做的事情？

Answer 1

您只需更改操作顺序即可。我在淡出后移动了text-change命令。因此元素淡出，然后jQuery将更新其文本。

$("#div")
.velocity("fadeIn", {
  duration: 2500
})
.velocity("fadeOut", {
  delay: 1500,
  duration: 2500
})
.text("Foo " + chooseWord());

小提琴：https://jsfiddle.net/Nisarg0/gLed0h1y/

在重复该过程之前，将标签淡入，淡出，然后更改文本

1 个答案: