jquery - 为什么我的 jQuery 完整函数在 animate 完成之前被调用？

Question

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

我所做的代码中的某个地方:

$.MyObject= new MyUberObject();

然后在我的 add 函数中，我指定回调，并调用动画并将回调传递给它。

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

您正在此处调用回调，这就是它被调用的原因。

尝试这样做，我认为由于关闭，名称和索引应该存在。

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