Почему моя полная функция jQuery вызывается до завершения анимации?

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

если нет, то вы можете добавить имя и индекс к 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 
     }    
    ); 
    ... 
} 

или, может быть, даже проще ...

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

Так повременить с вызовом обратного вызова.