アニメーションが終了する前にjQueryのcomplete関数が呼び出されているのはなぜですか？

Question

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

どこかに私がしたコードで：

$.MyObject= new MyUberObject(); 

その後、私のに私は戻って私のコールを指定して、アニメーションを起動し、それに私のコールバックを渡し、機能を追加します。

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

アラートは、すぐにボタンが押されているように私は警告をクリアしたら、その後、アニメーションは、私がコールバックを指定するさまざまな方法を試してみた...行くとすぐに出てくるだけでなく、しかし、遅延を使用して他の場所で呼び出すようにしてください...まだ行かないでください。

Answer 1

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

ここでコールバックしているので、呼び出されています。

はこれをやってみて、私は名前とインデックスが原因閉鎖に存在するべきだと思います。その後、あなたはouterwrapperに名前とインデックスを追加することができない場合

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

：多分

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

またはさらに簡単な...

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

Answer 2

あなたが関数を実行し、自己を使用しています、それが警告を見る理由です。 return文で匿名の自己実行関数を使用してみてください。

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

Closures - MDN

Answer 3

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

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

だからあなたのコールバックを呼び出すことで待ちます。