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

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

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

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

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

任何帮助将不胜感激!

编辑:

我实际上是为了提出问题而简化了我的问题。我不想发布一大堆代码(内部 html 的更改实际上是复杂的函数，涉及更改 CSS 形状的位置。)我的问题最终通过放置 setTimeout 得到解决。 在函数内部。谢谢大家的回答!

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