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

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

En algún lugar del código que hice:

$.MyObject= new MyUberObject();

entonces en mi add función, especifico mi devolución de llamada, invoco la animación y le paso mi devolución de llamada.

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

Sin embargo, la alerta aparece inmediatamente tan pronto como se presiona el botón, luego, una vez que borré la alerta, la animación se iría... Probé muchas formas diferentes de especificar la devolución de llamada, así como tratar de usar la demora y llamarla en otros lugares... todavía no se puede ir.

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

¡También uso alert("wtf") en mi depuración de js! No olvides sacarlo antes del lanzamiento... podría ser vergonzoso. :) -

ja. tienes razón al necesitar usar el cierre, pero mira mi respuesta, estás cerca. - edite, aunque supongo que realmente no necesita el cierre, pensé que se estaba ejecutando dentro de un bucle. -

3 Respuestas

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

Está llamando a la devolución de llamada aquí, es por eso que se está llamando.

Intente hacer esto, creo que el nombre y el índice deberían existir debido al cierre.

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

si no, puede agregar el nombre y el índice al envoltorio externo:

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

o tal vez incluso más simple...

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

La primera solución funciona. Extraño, en algún momento lo probé sin pasar (nombre, índice) antes y arrojaría un error. Pero muchas gracias, ¡estaba insistiendo en esto desde anoche! - nombre en clave cero

está utilizando una función autoejecutable, por eso ve la alerta. intente usar la función autoejecutable anónima con una declaración de devolución.

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

Cierres - MDN

respondido 09 mar '12, 17:03

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

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

Así que espere con la invocación de su devolución de llamada.

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.