排队setInterval

Question

我有一个setInterval来循环动画，每个递归之间都有一个延迟。

队列首先执行延迟，然后执行函数，然后再执行第四个。

是否可以在加载页面之后立即启动动画，然后延迟呢？

我知道animate()有一个强制的queue参数，但是在插件(animate()中的函数)中触发触发，但不触发计时器(setInterval)。

这是动画的示例

setInterval(function() {
  $('div').animate({
      marginLeft: '+=150px'
    }, 800,
    function() {
      $(this).animate({
        marginLeft: '-=150px'
      }, 800)
    })
}, 3000)

我不想开始一个新的问题，但由于它是相关的，我在这个问题中发现，我可以使用setTimeout循环，这是更好的，因为当您更改选项卡并切换回来时，元素会变得混乱

这给了我在这个更新中控制更新的想法。

但是，不管我更改了多少值，都不能设置延迟

下面是应用更新参数后的最后一个queue，我希望立即工作，然后应用延迟，但是不能设置延迟

Answer 1

也许就像

//first we create the function and give it a name (so it can be re-called)
//we then wrap it in parentheses and invoke it with () so it fires immediately (this is an IIFE)
(function loop () {
    //animate right
    $('div').animate({ marginLeft: '+=150px' }, 800, function() {
        //when the animate right is done, animate back left
        $(this).animate({ marginLeft: '-=150px' }, 800, function(){
            //setTimeout wants a function to invoke and a duration to wait until doing so
            //we give it 'loop' which is the name of our function so it will be re-used, thus creating the complete animation loop
            setTimeout(loop, 3000);
        });
    });
})();

如需更多参考：https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout

再多谈一些关于功能的事情。说你有以下的..。

function sayDog () { console.log('dog'); }
function sayCat () { console.log('cat'); }

这两个是函数定义。他们的实际逻辑将不会执行，直到你调用他们，正如你的意识。

sayDog(); <-- invoke sayDog
sayCat(); <-- invoke sayCat

但在javascript中，这些名称只是变量。我们可以很容易地把他们定义为..。

var sayDog = function () { console.log('dog'); }
sayDog();

以同样的结果结束。现在让我们来看看setTimeout。setTimeout的目的是将函数的执行延迟一段时间。所以说你有这个..。

setTimeout(sayDog(), 1000);

您希望sayDog在执行之前等待1000。但是您使用()显式地执行了它，所以它没有等待。另外，如果setTimeout不返回要执行的另一个函数，则在1000之后，sayDog将没有任何事情要做。

function printPet (petFunction) { petFunction(); }
printPet(sayDog);
printPet(sayCat);

将函数引用传递到其他函数中是完全有效的。上面的printPet接收给它的任何东西并调用它。它还将导致调用sayDog和sayCat。