Queuing a setInterval

Question

I have a setInterval to loop an animation, with a delay between each recursion.
the queue executes the delay first then the function, and so fourth
can it be possible to make the animation starts instantly after the page load, then the delay ?
I'm aware that animate() has a mandatory queue parameter, but that triggers inside the plugin (the function inside animate()) to fire, but not the timer (setInterval).
this is a sample of an animation

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

i don't want to start a new question, but since it's related, i found here in this question, that I can loop using setTimeout which is better since there's a bug when you change tabs and you switch back, elements get messy
which gives me the idea to control the queue in this update
except that the delay can't be set no matter how much I change the value
here's the last update after applying the queue parameter, i expected to work instantly then apply the delay, but the delay can't be set

Answer 1

Maybe something like

//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);
        });
    });
})();

For more reference: https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout

To talk about the function thing a little more. Say you have the following...

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

Those two are function definitions. Their actual logic will not execute until you call them, as your aware.

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

But in javascript, those names are just variables. We could have easily have defined them as...

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

That ends in the same result. Now lets look at setTimeout. The purpose of setTimeout is to delay the execution of the function for a set period of time. So say you had this...

setTimeout(sayDog(), 1000);

You would expect sayDog to wait 1000 before executing. But you explicitly executed it with the (), so it didn't wait. As a side note, the setTimeout will not have anything to do after 1000 if the sayDog doesn't return another function for it to execute.

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

It is completely valid to pass function references into other functions. The above has printPet taking in whatever is given to it and invoking it. It will also result in both sayDog and sayCat being invoked.