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

你在这里调用回调，这就是它被调用的原因。

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

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!");
}

等待调用你的回调。

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

3 个答案: