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

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());

fiddle :https://jsfiddle.net/Nisarg0/gLed0h1y/