[javascript，jQuery]如何在继续播放另一个没有回调的动画之前等待动画完全完成

Question

http://jsfiddle.net/jmztZ/

Above is the link to my problem. Let say that I have only 1 div, whose content may change via .html(). I would like to use the div to change its content and display itself using animate() or show() etc. However, when there are 2 functions that manipulate the div, browser's speed is too fast which seems to skip the first .html() function.

Question: How could I wait until the first function (aka "go()" in the fiddle) to completely execute (which includes changing contents .html() and all animation) before firing the second function (aka "went").

Attempts:

Note: Even though those attempts of mine seems to execute the animation respectively on queue, the html() function can never wait. Take a look at the fiddle again. Also, I've tried several methods found on Stackoverflow, and they all end up the same.

I've tried using:

//Regular way, obviously didn't work
go(); went();

And using Deferred:

$.Deferred().done(go, went).resolve();

And also self-called function:

var f = [go, went]; c = 0;
(function selfCall(){
    if (c >= f.length) return;
    f[c].call(); c++;
    selfCall();
})();

But none of them seems to work properly.

So to finalize, I would have an Array which can use .push() to push in any number of functions to execute, the functions are all about manipulating the content of the div and animate it. I would like to know the way to properly execute all functions from that Array, one by one, and the next one must wait until the current one is finish.

Answer 1

You cant do it without callback, but here a work arround. When calling the function, send selfCall as parameter:

f[c].call(null, selfCall); c++; //null = this in function, but you don't use this.

Then, in the go function, do this :

function go(callback) {
    $("#foo").html("GO");
    $("#foo").show("drop", 750).hide("explode", 500, callback);
}

Fiddle : http://jsfiddle.net/jmztZ/1/

Answer 2

Try this.

function go() {
    $("#foo").html("GO");
    return $("#foo").show("drop", 750).hide("explode", 500).promise();
}
function going() {
    $("#foo").html("going");
    return $("#foo").show("drop", 750).hide("explode", 500).promise();
}
function gone() {
    $("#foo").html("gone");
    return $("#foo").show("drop", 750).hide("explode", 500).promise();
}
function went() {
    $("#foo").html("WENT");
    return $("#foo").show("drop", 750).hide("explode", 500).promise();
}
var arr = [go, going, gone, went],
    thisItem;

//randomize array
arr = arr.sort((function() { return 0.5 - Math.random();}));

function getNextArrayFn() {
    thisItem = arr.shift();
    thisItem().done(getNextArrayFn);
};
getNextArrayFn();

Here is the fiddle: http://jsfiddle.net/jmztZ/31/

Answer 3

I think you may try a technic called Monad —— But what is Monad ? I can not explain it properly.

So , "Please show me the code!"

We have some async functions in a array pipequeue ,each function in pipequeue must be a deferred instance . the function can be async. they will executed one by one.

like this : drop explode drop2 explode2 are four async animation process , each one returned a jQuery promise .

the complete code is at jsbin: http://jsbin.com/ikovof/2/

var $el = $("#foo");
function drop(){
  var defer = Deferred()
    , promise = defer.promise()
  $el.html("GO");
  $el.show("drop",{
    complete:function(){
      defer.resolve();
    }
  },1000)
  return promise;
}

function explode(){
  var defer = Deferred()
    , promise = defer.promise()
  $el.hide("explode",{
    complete:function(){
      defer.resolve();
    }
  },1000)
  return promise;
}

function drop2(){
  var defer = Deferred()
    , promise = defer.promise()
  $el.html("WENT");
  $el.show("drop",{
    complete:function(){
      defer.resolve();
    }
  },1000)
  return promise;
}

function explode2(){
  var defer = Deferred()
    , promise = defer.promise()
  $el.hide("explode",{
    complete:function(){
      defer.resolve();
    }
  },1000)
  return promise;
}

var pipequeue = [drop,explode,drop2]

pipequeue.push(explode2);

pipe(unit(),pipequeue);

You can push or pop pipequeue . every fn in pipequeue is without coupling ！

But if you think pipe(unit(),pipequeue) is a bit of ...

you can wrap unit() call into a function:

function pipePromise(pipequeue){
  pipe(unit(),pipequeue);
}
// then your call can be quite neat now  
pipePromise(pipequeue);

Answer 4

I like Mr. Smee's Answer , but there is another option. Write the html in a callback to .hide(0, callback) :

$("#foo").hide(0, function(){ $(this).html("GO"); });

http://jsfiddle.net/jmztZ/34/

You can even call them sequentially that way:

http://jsfiddle.net/jmztZ/35/