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

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

您只需要更改操作顺序。我已经在淡出后移动了文本更改命令。所以元素淡出，然后jQuery将更新其文本。

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

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