jQuery第一周期无延迟

user2929830 发表于 Dev

用户名

我有一些javascript，它们基本上会在3种不同的标题中循环消失。

我最初遇到的问题是，第一个循环上的第一个标题（'text1'）具有3秒的延迟，我希望它在加载页面时显示出来。

<div style="padding:20px;"><h1 id="heroText"></h1></div>

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

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

因此，我要做的就是更改'text'变量的顺序，并在html中写上“ text1”，这样它就可以毫无延迟地最初显示在页面上，然后以正确的顺序继续循环，如下所示：

http://jsfiddle.net/7EaHF/1/

<div style="padding:20px;"><h1 id="heroText">text1</h1></div>

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

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

我的问题是，我可以禁用javascript中第一个“ text1”标题的初始延迟，而不必在html中写入第一个“ text1”吗？这主要是因为其他人将使用和更改此代码，并且如果他们必须始终将第一个显示在变量列表中的最后位置并同时更新html，则可能会感到困惑。

我想这很简单，但是我仍在学习javascript，并且无法找到实现此目的的方法，在此先感谢。

李·贝利

http://jsfiddle.net/UbEaB/2/

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

// declare the function that does the work
function fadeText() {
    $content.fadeOut(function () {
        $content.text(text[i++ % text.length]).fadeIn();
    });
}

// call it immediately so that the first text shows up
fadeText();

// set it to repeat
setInterval(fadeText, 3000);