How do I chain or queue custom functions using JQu

问题:

I have multiple functions the do different animations to different parts of the HTML. I would like to chain or queue these functions so they will run the animations sequentially and not at the same time.

I am trying to automate multiple events in sequence to look like a user has been clicking on different buttons or links.

I could probably do this using callback functions but then I would have to pull all of the animations from the different functions and regroup in the right pattern.

Does the jquery "queue" help? I couldn't understand the documentation for the queue.

Example, JQuery:

 function One() {
        $('div#animateTest1').animate({ left: '+=200' }, 2000);
    }
    function Two() {
        $('div#animateTest2').animate({ width: '+=200' }, 2000);
    }

// Call these functions sequentially so that the animations
// in One() run b/f the animations in Two()
    One();
    Two();

HTML:

    <div id="animatetest" style="width:50px;height:50px;background-color:Aqua;position:absolute;"></div>
    <div id="animatetest2" style="width:50px;height:50px;background-color:red;position:absolute;top:100px;"></div>

Thanks.

EDIT: I tried it with timers but I thought there is a better way to do it.

EDIT #2:

Let me be more specific. I have multiple functions bound to click & hover events on different elements of the page. Normally these functions have nothing to do with each other ( they don't reference each other). I would like to simulate a user going through these events without changing the code of my existing functions.

回答1:

The jQuery Queue code is not as well documented as it could be, but the basic idea is this:

$("#some_element").queue("namedQueue", function() {
  console.log("First");
  var self = this;
  setTimeout(function() {
    $(self).dequeue("namedQueue");
  }, 1000);
});

$("#some_element").queue("namedQueue", function() {
  console.log("Second");
  var self = this;
  setTimeout(function() {
    $(self).dequeue("namedQueue");
  }, 1000);
});

$("#some_element").queue("namedQueue", function() {
  console.log("Third");
});

$("#some_element").dequeue("namedQueue");

If you run this code, you will see "First" in the console, a pause of 1s, see "Second" in the console, another pause of 1s, and finally see "Third" in the console.

The basic idea is that you can have any number of named queues bound to an element. You remove an element from the queue by calling dequeue. You can do this yourself manually as many times as you want, but if you want the queue to run automatically, you can simply call dequeue inside the queued up function.

Animations in jQuery all run inside a queue called fx. When you animate an element, it automatically adds the new animation on the queue and calls dequeue if no animations are currently running. You can insert your own callbacks onto the fx queue if you wish; you will just need to call dequeue manually at the end (as with any other queue use).

回答2:

I'd create an array of functions and add every function you want to queue to it.

Then I'd append a function call which loops through the array and calls each function to the event through jQuery.

You could probably create a very simple plugin for jQuery that could handle this internally as well.

回答3:

Assuming you want to keep One and Two as separate functions, you could do something like this:

function One(callback) {
    $('div#animateTest1').animate({ left: '+=200' }, 2000, 
        function(e) { callback(); });
}
function Two() {
    $('div#animateTest2').animate({ width: '+=200' }, 2000);
}

// Call these functions sequentially so that the animations
// in One() run b/f the animations in Two()
    One(Two);

回答4:

On one of my web projects, I had to perform various sequences of actions depending on what event fired. I did this using callbacks (something like the Visitor pattern). I created an object to wrap any function, or group of actions. Then I would queue those wrappers; an array works fine. When the event fired, I would iterate over the array, calling my object's specialized method that took a callback. That callback triggered my iteration to continue.

To wrap a function, you need knowledge of the apply function. The apply function takes an object for scope and an array of arguments. That way you don't need to know anything about the functions you are wrapping.

回答5:

I would run the second as a callback function:

$('div#animateTest1').animate({ left: '+=200' }, 2000, function(){
    two();
});

which would run two() when first animation finishes, if you have more animations on timed queue for such cases i use jquery timer plugin instead setTimeout(), which comes very handy in some cases.

回答6:

How about just something of the like?

var f1 = function() {return $(SELECTOR1).animate({ 'prop': 'value' }, 1000)};
var f2 = function() {return $(SELECTOR2).animate({ 'prop': 'value' }, 1000)};
var f3 = function() {return $(SELECTOR3).animate({ 'prop': 'value' }, 1000)};

$.when(f1).then(f2).then(f3);

回答7:

A safer and 100% working way is to use a variable and if-branches. In the example below we do 4 jobs which take 1 second, after the job we want the function f2 to run.

<html><body>
<div id="a" class="a" />
 <script type="text/javascript">
var jobs = 0;
function f1() {
job(); 
job();
job();
job();    
};

function f2() {
    if(jobs >3)
        l("f2");
};

<!------------------------- ->
function job() {
    setTimeout(function() {
        l("j");
        jobs+=1;
        f2();
    }, 1000);
}
function l(a) {
    document.getElementById('a').innerHTML+=a+"<br />";
};
f1();


</script></body></html>

回答8:

Really Simple Fix.

function One() {
        $('div#animateTest1').animate({ left: '+=200' }, 2000, Two);
    }
    function Two() {
        $('div#animateTest2').animate({ width: '+=200' }, 2000);
    }

// Call these functions sequentially so that the animations
// in One() run b/f the animations in Two()
    One();
//We no longer need to call Two, as it will be called when 1 is completed.
    //Two();

回答9:

As far as animation interval already defined in 2000 ms, you can do second call with delay in 2000 ms:

One();
SetTimeout(function(){
  Two();
}, 2000);

回答10:

The following will work and will not error if callback is null:

function One(callback)
{
    $('div#animateTest1').animate({ left: '+=200' }, 2000, 
       function()
       {
            if(callback != null)
            {
                 callback();
            }
       }
    );
}
function Two()
{
    $('div#animateTest2').animate({ width: '+=200' }, 2000);
}

var callback = function(){ Two(); };
One(callback);

回答11:

@TrippRitter gotta attach .call to the callback

One = function(callback){
    $('div#animateTest1').animate({ left: '+=200' }, 2000, function(){
        if(typeof callback == 'function'){
            callback.call(this);
        }
    });
}

Two = function(){
    $('div#animateTest2').animate({ width: '+=200' }, 2000);
}

One(function(){ 
    Two();
});

but its is the same as doing the following

$('div#animateTest1')
    .animate({ left: '+=200' }, 2000, 
    function(){
       Two();
    });

Two = function(){
    $('div#animateTest2').animate({ width: '+=200' }, 2000);
}

回答12:

$('div#animateTest1').animate({left: '+=200'},2000, 
function(){
   $('div#animateTest2').animate({ width: '+=200' }, 2000);
}
);

回答13:

Copy and pasting............7/9/2013

<!doctype html>
<html lang="en">
    enter code here<head>
  <meta charset="utf-8">
  <title>jQuery.queue demo</title>
  <style>
  div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:30px;
        background:green; display:none; }
  div.newcolor { background:blue; }
    </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>

  <button id="start">Start</button>
  <button id="stop">Stop</button>
  <div></div>
<script>
   $("#start").click(function () {
      $("div").show("slow");
      $("div").animate({left:'+=200'},5000);
      jQuery.queue( $("div")[0], "fx", function () {
        $(this).addClass("newcolor");
        jQuery.dequeue( this );
      });
      $("div").animate({left:'-=200'},1500);
      jQuery.queue( $("div")[0], "fx", function () {
        $(this).removeClass("newcolor");
        jQuery.dequeue( this );
      });
      $("div").slideUp();
    });
    $("#stop").click(function () {
      jQuery.queue( $("div")[0], "fx", [] );
      $("div").stop();
    });
</script>

</body>
</html>

回答14:

While Yehuda Katz's answer is technically correct it will bloat very quickly with larger more complex animations.

I made a plugin for situations like yours that allows for queuing functions (with pause and resume if needed).

demo: https://jessengatai.github.io/okaynowthis.js/

The solution to your problem using okaynowthis.js would look like this:

$('window').load(function(){

    // keyframe 1
    $('body').okaynowthis('keyframe',0,function(){
        $('div#animateTest1').animate({ left: '+=200' }, 2000);
        // + anything else you want to do

    // keyframe 2 (with 2 seconds delay from keyframe 1)
    }).okaynowthis('keyframe',2000,function(){
        $('div#animateTest2').animate({ left: '+=200' }, 2000);
        // + anything else you want to do

    });

});

回答15:

Instead of creating a function simple way is here:

$('#main').animate({ "top": "0px"}, 3000, function()
   {    $('#navigation').animate({ "left": "100px"},  3000, function() 
        {
            alert("Call after first and second animation is completed.");
        })
    }
);

So, Jquery by default provide queue that execute function one by one.