jquery延迟和重复函数

我想在一张简单的图片上重复一个动画，我已经用setinterval函数轻松地完成了。但我也希望在页面加载后将重复延迟5秒

现在我有这个：

setInterval(function(){
    $("#arrow").fadeToggle(400);
}, 1000);

我想这样延迟动画，但它不起作用：

setTimeout(
     setInterval(function(){
        $("#arrow").fadeToggle(400);
     }, 1000);
, 5000);

---

有没有一个简单的方法可以做到这一点？

你走对了方向。尝试将其转换为函数，然后延迟

function fader() {
    setInterval(function(){
       $("#arrow").fadeToggle(400);
    }, 1000);
}
setTimeout(fader, 5000);

---

你在正确的轨道上。尝试将其转换为函数，然后延迟

function fader() {
    setInterval(function(){
       $("#arrow").fadeToggle(400);
    }, 1000);
}
setTimeout(fader, 5000);

---

我认为setTimeout很好，但是您可以让fadeToggle函数在完成时调用自己（递归）

---

我认为setTimeout很好，但您可以在完成时调用fadeToggle函数本身（递归）

---

使用setInterval，它会自行延迟1s（在您的情况下）。顺便说一句，这就是如何使用这两种方法：

setTimeout(function(){

setInterval(function () {
console.log("Hi There I'll wait 10 seconds to start first time")
                        }, 3000);

},7000)

---

使用setInterval，它会自行延迟1s（在您的情况下）。顺便说一句，这就是如何使用这两种方法：

setTimeout(function(){

setInterval(function () {
console.log("Hi There I'll wait 10 seconds to start first time")
                        }, 3000);

},7000)

---

请注意，

setInterval

可能最终导致动画不同步。特别是，无论动画是否完成，

setInterval

都会触发。在这种情况下，这不是什么大问题，但如果您的延迟较小，这可能会成为一个问题

要做到这一点，更可靠的方法是：

function animateFade() {
   $('#arrow').fadeToggle(400).delay(600).promise().done(animateFade);
}

// Put this in your document ready handler, handles your initial delay
setTimeout(animateFade, 5000);

只有在带有延迟的动画完成后，

animateFade

函数才会调用自身。这保证了您永远不会同时运行两个函数（并且您的动画永远不会失去同步）

---

请注意，

setInterval

可能最终导致动画不同步。特别是，无论动画是否完成，

setInterval

都会触发。在这种情况下，这不是什么大问题，但如果您的延迟较小，这可能会成为一个问题

要做到这一点，更可靠的方法是：

function animateFade() {
   $('#arrow').fadeToggle(400).delay(600).promise().done(animateFade);
}

// Put this in your document ready handler, handles your initial delay
setTimeout(animateFade, 5000);

只有在带有延迟的动画完成后，

animateFade

函数才会调用自身。这保证了您永远不会同时运行两个函数（并且您的动画永远不会失去同步）