0

私は一連のいくつかの遅延関数を持つ関数を持っています:

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

気がつけば、2回ループすると「Hello」で止まります。どうしてこれなの？ここに私の問題を表示するフィドルがありますhttp://jsfiddle.net/rX6B/2/

どんな助けでも大歓迎です！

編集：

質問をするために、実際に問題を単純化しました。コードの大きな壁を投稿したくありませんでした (内部の html の変更は、実際には CSS 形状の配置の変更を伴う複雑な関数です)。私の問題は、最終的に関数のsetTimeout 内部に配置することで解決されました。回答ありがとうございます。

4

3 に答える 3

2

「気がつけば2回ループすると『Hello』で止まる。これはなぜ？」

このメソッドは、指定された遅延の後に一度setTimeout()実行される関数をキューに入れるため、繰り返し続けたい場合は関数内から呼び出す必要があります-または代わりに使用します。setInterval()

ただし、.delay()メソッドを誤用しています。これは、実際には他の jQuery アニメーション メソッドで使用することを目的としています。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()関数でハードコーディングするのではなく、どの要素を設定するかを示す別のパラメーターを追加することもできます...

于 2013-10-28T21:12:41.973 に答える
2

関数で使用するだけです

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

于 2013-10-28T21:07:24.050 に答える
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);
于 2013-10-28T21:09:44.540 に答える