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

Question

I have a function which has a series of several delayed functions:

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

With a simple <div>Hello</div> in HTML. This way, the greeting changes language every 500ms.

After the function completes (which takes about 2 seconds; 2000ms) I want to start the function over and have loop it infinitely. So, I tried the usual:

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

If you notice, once it loops through twice, it stops at "Hello". Why is this? Here is a fiddle displaying my problem http://jsfiddle.net/rgX6B/2/

Any help would be much appreciated!

Edit:

I actually simplified my problem for the sake of asking a question. I didn't want to post a big wall of code (the changing of the inner html are actually complex functions that involve changing the positioning of CSS shapes.) My problem was ultimately solved by putting the setTimeout inside the function. Thank you all for your answers!

Answer 1

You just have to use it in your function

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

another solution would be to use setInterval(function() { greet(..) }, 3000);

Answer 2

Your algorithm seems a bit messy, and violates DRY, making it more difficult to maintain. Here's an alternative:

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

"If you notice, once it loops through twice, it stops at "Hello". Why is this?"

The setTimeout() method queues up a function to be executed once after a given delay, so you would need to call it from inside your function if you want it to keep repeating - or use setInterval() instead.

However, you are misusing the .delay() method, which is really intended to be used with other jQuery animation methods . setTimeout() is what you should be using for all of the delays in your function. I'd probably implement your function more like this:

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

Demo: http://jsfiddle.net/rgX6B/5/

You could perhaps add another parameter to indicate which element(s) to set the .html() for, rather than hardcoding that in the function...