jQuery - run multiple methods sequentially

问题

if i do:

method();
method();

both calls will run in parallel (at same time)

i just would like to make the second method(); wait until the first method(); is finished before to start, and do it dynamically cause i can't know how many times i will launch method(); at same time .

Is it possible?

just for example, those runs at same time as i can see... http://jsfiddle.net/Lcgb8/

回答1:

You could use then if you return a Deferred.

E.g.

function method() {
    var d = $.Deferred();

    //do something async
    setTimeout(function () {
        d.resolve('some data'); //inform listeners that the process is completed
    }, 2000);

    return d; //return the deferred object
}

Then you could do:

method().then(method).then(method).then(method);

Note that the return value of each call will be passed as first argument to the next call, respectively.

EDIT: Here's an example on how you could queue the async operations dynamically.

FIDDLE

function changeColorAsync(color) {
    var d = $.Deferred();

    setTimeout(function () {
        $('body').css('background', color);

        d.resolve();

    }, 4000);

    return d;
}

$(function () {
    $('#color-form').on('submit', function (e) {
        var color = $(this).find(':checked').val(), d;

        d = d? 
            d.then(changeColorAsync.bind(this, color)) : 
            changeColorAsync(color);

        return false;
    });
});

回答2:

Here is a sequentially animation using transitionend

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>animation</title>
<style>
div{
width:50px;height:50px;background-color:#093;
-webkit-transition:all 300ms ease;
}
div.move{-webkit-transform:translate3d(200px,0,0);}/*GPU HW acceleration*/
</style>
<script>
(function(W){
 var D,d,L,c=0;
 function init(){
  D=W.document;d=D.getElementsByTagName('div');L=d.length;var l=d.length;
  while(l--){d[l].addEventListener('transitionend',next,false)}
  next();
 }
 function next(){
  d[c].classList[(d[c].className=='move'?'remove':'add')]('move');
  c++;c=(c==L?0:c);
 }
 W.addEventListener('load',init,false);
})(window)
</script>
</head>
<body><div></div><div></div><div></div><div></div></body>
</html>

it had little error fixed now..

supports infinite div's and it's infinite loop using low resources. =)

your method() would be my next()

if someone want's to jsfiddle it... i don't use that.

ps.: pure javascript (no jquery) + css3 (with -webkit prefix);

example

http://jsfiddle.net/4eujG/

回答3:

Have a look at jQuery.queue().

回答4:

Using callback:

var test = function (letter, callback) {
    console.log(letter);

    if (typeof callback !== 'undefined') {
        callback();
    }
};

Now you can run it:

test('a', function () {
    test('b', function () {
        test('c')
    });
});

The result in console is:

a
b
c

Is it helpful to you?

回答5:

     $( "div" ).promise().done(function() {
     $( "p" ).append( " Finished! " );
     });

Hope this example must have cleared your query

LIVE DEMO

Javascript, and most other languages, run code sequentially.

Therefore, they will not both run at the same time.

In fact, it is not possible to run two different pieces of Javascript code at the same time. However, in many other languages, it is possible using threads.

However, if they make AJAX calls, the corresponding server-side code called by both functions will run simultaneously. To prevent that, you'll need to make the first function accept a callback parameter and pass it the second function.

来源：https://stackoverflow.com/questions/18302894/jquery-run-multiple-methods-sequentially

标签

javascript

jquery

methods