Javascript jQuery第一个周期没有延迟

我有一些javascript，基本上在3个不同的标题中循环淡出

我最初遇到的问题是，第一个循环中的第一个标题（“text1”）有3秒的延迟，我希望它显示为加载的页面

原始代码：

变量text=['text1'，'text2'，'text3']；
i=0，
$content=$（“#heroText”）；
setInterval（函数（）
{
$content.fadeOut（函数（）
{
$content.text（text[i++%text.length]）.fadeIn（）；
});
}, 3000);

因此，我所做的只是更改“text”变量的顺序，并在html中写入“text1”，使其最初显示在页面上，没有延迟，然后以正确的顺序继续循环，如图所示：

text1
变量text=['text2'，'text3'，'text1']；
i=0，
$content=$（“#heroText”）；
setInterval（函数（）
{
$content.fadeOut（函数（）
{
$content.text（text[i++%text.length]）.fadeIn（）；
});
}, 3000);

我的问题是，我是否可以禁用javascript中第一个“text1”标题的初始延迟，而不必在html中写入第一个“text1”？这主要是因为其他人将使用和更改此代码，如果他们总是将第一个显示的代码放在变量列表的最后，并更新html，则可能会产生混乱

我想这很简单，但我仍在学习javascript，无法找到一种方法来实现这一点，提前谢谢。

---

setInterval

将函数作为参数，并等待

3000ms

后再执行相同的操作。如果要立即执行一次，可以在调用setInterval后手动执行

var text = ['text1', 'text2', 'text3'];
i = 0,
$content = $('#heroText');

setInterval(function ()
{
    $content.fadeOut(function ()
    {
        $content.text(text[i++ % text.length]).fadeIn();
    });
}, 3000);

    $content.fadeOut(function ()
    {
        $content.text(text[i++ % text.length]).fadeIn();
    });

---

如果将其包装为命名函数，它的可读性会更好

让淡入淡出函数直接调用自身，然后应用间隔：

var text = ['text2', 'text3', 'text1'],
    i = 0,
    $content = $('#heroText');


(function doStuff(){

    $content.fadeOut(function (){
        $content.text(text[i++ % text.length]).fadeIn();
    });

    setInterval(doStuff, 3000);

})();

---

简单破解：在

.setInterval（）

方法之前显示文本，并使用

++i

而不是

i++

var text = ['text1', 'text2', 'text3'];
    i = 0,
    $content = $('#heroText');

changeText(text[i]);
setInterval(function ()
{
    $content.fadeOut(function ()
    {        
        changeText(text[++i % text.length]);
    });
}, 3000);

function changeText(t) {
    $content.text(t).fadeIn();
}

---

++i

将导致“text1”上的“text2”和“text2”上的“text3”等。是的，但是，我们从

changeText（text[i]）开始，其中
i=0
。
var text = ['text1', 'text2', 'text3'];
i = 0,
$content = $('#heroText');

setInterval(function ()
{
    $content.fadeOut(function ()
    {
        $content.text(text[i++ % text.length]).fadeIn();
    });
}, 3000);

    $content.fadeOut(function ()
    {
        $content.text(text[i++ % text.length]).fadeIn();
    });

var text = ['text2', 'text3', 'text1'],
    i = 0,
    $content = $('#heroText');


(function doStuff(){

    $content.fadeOut(function (){
        $content.text(text[i++ % text.length]).fadeIn();
    });

    setInterval(doStuff, 3000);

})();

var text = ['text1', 'text2', 'text3'];
    i = 0,
    $content = $('#heroText');

changeText(text[i]);
setInterval(function ()
{
    $content.fadeOut(function ()
    {        
        changeText(text[++i % text.length]);
    });
}, 3000);

function changeText(t) {
    $content.text(t).fadeIn();
}