排队 setInterval

Question

我有一个 setInterval 循环动画，每次递归之间都有延迟。
队列先执行延迟，然后执行函数，以此类推
是否可以让动画在页面加载后立即开始，然后延迟？
我知道 animate() 有一个强制性的 queue 参数，但是会在插件内部触发（animate() 中的函数），而不是计时器（setInterval） .
这是一个sample的动画

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

我不想开始一个新问题，但由于它是相关的，我在这个 question 中发现我可以循环使用 setTimeout 哪个更好，因为当您更改选项卡并切换回来时会出现错误，元素会变得混乱
这给了我控制 update
中的 queue 的想法只是无论我怎么改都不能设置延迟
这是应用queue参数后的最后一个update，我希望立即工作然后应用延迟，但无法设置延迟

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。但是你明确地用()执行了它，所以它没有等待。附带说明一下，如果 sayDog 没有 return 另一个要执行的函数，则 setTimeout 在 1000 之后将无事可做。

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

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

排队 setInterval

Queuing a setInterval

queue

jquery

animation

setinterval