How do I chain or queue custom functions using JQuery?

前端未结

关注

 15  1385

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 sequenti

相关标签:

15条回答

忘掉有多难

2020-12-04 20:37

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>

0 讨论(0)

遥遥无期

2020-12-04 20:40
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).
0 讨论(0)
发布评论:

提交评论
- 加载中...

傲寒

2020-12-04 20:43

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);

0 讨论(0)

上一页 1 2 3