¿Por qué se llama a mi función jQuery complete antes de que termine la animación?

<button onclick="$.MyObject.add('wrapper');">Add</button>

Somewhere in the code I did:

$.MyObject= new MyUberObject();

entonces en mi add function, I specify my call back, and invoke the animation and pass my callback to it.

function MyUberObject(data) {
  ...
  this.add = function(name, index) {
     var callback = function(n,i) { 
              $.MyObject.addDiv(n, i); 
              alert("wtf");
           }(name, index);

     $("#outerWrapper").animate(
        {
           "width": "+=200px",             
        }, 
        {
           duration : "fast",
           easing: "linear",
           complete: callback
        }               
     );
  ...
}

However the alert come up immediately as soon as the button is pressed, then once I cleared the alert, the animation would go... I've tried many different ways of specifying the callback, as well as try to use delay and call it in other places... still no go.

preguntado el 09 de marzo de 12 a las 17:03

I use alert("wtf") in my debugging of js as well! Just don't forget to take it out prior to launch... could be embarrassing. :) -

hah. you are right in needing to use the closure, but see my response, you are close. - edit, although I guess you don't really need the closure, I thought it was being run within a loop. -

3 Respuestas

 var callback = function(n,i) { 
          $.MyObject.addDiv(n, i); 
          alert("wtf");
       }(name, index);

You are calling the callback here, that's why it's getting called.

Try doing this, I think name and index should exist due to closure.

function MyUberObject(data) {
  ...
  this.add = function(name, index) {

     var callback = function() { 
              $.MyObject.addDiv(name, index); 
              alert("wtf");
           };

     $("#outerWrapper").animate(
        {
           "width": "+=200px",             
        }, 
        {
           duration : "fast",
           easing: "linear",
           complete: callback
        }               
     );
  ...
}

if not then you can add the name and index to the outerwrapper:

function MyUberObject(data) {
  ...
  this.add = function(name, index) {

     var callback = function() { 
              $.MyObject.addDiv($(this).data("props").name, $(this).data("props").index); 
              alert("wtf");
           };

     $("#outerWrapper").data("props", {name : name, index : index};
     $("#outerWrapper").animate(
        {
           "width": "+=200px",             
        }, 
        {
           duration : "fast",
           easing: "linear",
           complete: callback
        }               
     );
  ...
}

or maybe even simpler...

function MyUberObject(data) {
  ...
  this.add = function(name, index) {

     var callback = function(n, i) { 
              $.MyObject.addDiv(n, i); 
              alert("wtf");
           };

     $("#outerWrapper").animate(
        {
           "width": "+=200px",             
        }, 
        {
           duration : "fast",
           easing: "linear",
           complete: function(){callback(name, index);}
        }               
     );
  ...
}

respondido 09 mar '12, 17:03

The first solution works. Weird, at some point I tried it without passing (name, index) into it before and it would throw error. But many thanks, was hammering on this since last night! - nombre en clave cero

you're using a self executing function, that's why you see the alert. try using using the anonymous self executing function with a return statement.

var callback = function(n,i) { 
  return function(){
    $.MyObject.addDiv(n, i); 
  }
}(name, index);

Closures - MDN

respondido 09 mar '12, 17:03

var tmp = function () {
  console.log("automatically executed!");
}();

var tmp = function () {
  console.log("Executed when invoked!");
}

So wait with invoking your callback.

contestado el 05 de mayo de 12 a las 17:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.