CODEWITHSUNDEEP
jquerycallbackjquery-animate
codenamezero
codenamezero

Reputation: 3079

Why is my jQuery complete function called before animate is finish?

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

Somewhere in the code I did:

$.MyObject= new MyUberObject();

then in my 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.

Upvotes: 3

Views: 4026

Answers (3)

jack
jack

Reputation: 1317

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

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

So wait with invoking your callback.

Upvotes: 2

thescientist
thescientist

Reputation: 2948

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

Upvotes: 2

ek_ny
ek_ny

Reputation: 10243

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

Upvotes: 5

Related Questions