jQuery如何在一系列延迟后循环一个函数

Question

我有一个具有一系列延迟函数的函数：

function greet(t) {
    $("div").delay(t*2).queue(function(n) {
         $(this).html("Bonjour");
        n();
    });

    $("div").delay(t*3).queue(function(n) {
         $(this).html("Hola");
        n();
    });

    $("div").delay(t*4).queue(function(n) {
         $(this).html("Hallo");
        n();
    });

    $("div").delay(t*5).queue(function(n) {
        $(this).html("Hello"); // back to original
        n();
    });
}

greet(500);

在 HTML 中使用简单的<div>Hello</div>。这样，问候语每 500 毫秒更改一次语言。

函数完成后（大约需要 2 秒；2000 毫秒）我想重新启动函数并无限循环它。所以，我尝试了通常的方法：

    setTimeout(function() {
       greet(500);
    }, 2500); // after 2500ms, repeat the function

如果您注意到，一旦它循环了两次，它就会在“Hello”处停止。为什么是这样？这是一个显示我的问题的小提琴http://jsfiddle.net/rgX6B/2/

任何帮助将不胜感激！

编辑：

我实际上是为了提出问题而简化了我的问题。我不想贴一大堵代码（内部html的更改实际上是涉及更改CSS形状位置的复杂功能。）我的问题最终通过将setTimeout inside em>函数。谢谢大家的回答！

Answer 1

你只需要在你的函数中使用它

http://jsfiddle.net/kelunik/rgX6B/4/

function greet(t) {
    $("div").delay(t*1).queue(function(n) {
         $(this).html("Bonjour");
        n();
    });

    $("div").delay(t*2).queue(function(n) {
         $(this).html("Hola");
        n();
    });

    $("div").delay(t*3).queue(function(n) {
         $(this).html("Hallo");
        n();
    });

    $("div").delay(t*4).queue(function(n) {
        $(this).html("Hello"); // back to original
        n();
    });

    setTimeout(function() {
       greet(500);
    }, 500);
}

greet(500);

另一种解决方案是使用setInterval(function() { greet(..) }, 3000);

Answer 2

您的算法看起来有点乱，并且违反了 DRY，使其更难维护。这是另一种选择：

http://jsfiddle.net/LLQXj/

var greetings = [
    "Hello",
    "Bonjour",
    "Hola",
    "Hallo"
];

function greet(idx) {
    $('div').html(greetings[idx]);
    var next = (idx + 1) > (greetings.length - 1) ? 0 : idx + 1;
    setTimeout(function() { greet(next); }, 1000);
}

greet(0);

Answer 3

“如果你注意到，一旦它循环了两次，它就会停在“Hello”处。这是为什么？”

setTimeout() 方法在给定延迟后将要执行的函数排队一次，因此如果您希望它继续重复，则需要从函数内部调用它 - 或使用 @改为 987654324@。

但是，您误用了.delay() 方法，该方法实际上是打算与other jQuery animation methods 一起使用的。 setTimeout() 是你应该使用的函数中的所有延迟。我可能会更像这样实现您的功能：

function greet(delay, messages, nextMessage) {
    if (nextMessage === undefined) nextMessage = 0;
    $("div").html(messages[nextMessage]);
    setTimeout(function() {
        greet(delay, messages, (nextMessage + 1) % messages.length);
    }, delay);
}

greet(500, ["Hello","Hola","Hallo"]);

演示：http://jsfiddle.net/rgX6B/5/

您也许可以添加另一个参数来指示要为哪些元素设置.html()，而不是在函数中硬编码...