j查询如何在一系列延迟后循环函数

jQuery how to loop a function after a series of delay

本文关键字：延迟 循环 函数 一系列 查询      更新时间：2023-09-26

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

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

如果你注意到，一旦它循环两次，它就会停在"你好"。这是为什么呢？这是一个显示我的问题的小提琴 http://jsfiddle.net/rgX6B/2/

任何帮助将不胜感激！

编辑：

我实际上简化了我的问题，以便提出问题。我不想发布一大堆代码（内部 html 的更改实际上是涉及更改 CSS 形状位置的复杂功能。我的问题最终通过将setTimeout放在函数中来解决。谢谢大家的回答！

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

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

你的算法似乎有点混乱，并且违反了 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);

"如果你注意到，一旦它循环两次，它就会停在"你好"处。这是为什么呢？

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()的元素，而不是在函数中对其进行硬编码......

相关文章：