Question

我有一些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而且找不到办法做到这一点，提前谢谢。

Answer 1

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

Answer 2

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

如果包装为命名函数

，它将更好地读取

Answer 3

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

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


(function doStuff(){

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

    setInterval(doStuff, 3000);

})();

http://jsfiddle.net/uKZc8/

Answer 4

简单黑客：在.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();
}

jQuery第一个周期没有延迟

4 个答案: