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

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

Однако сигнал тревоги появляется сразу же, как только кнопка нажата, а затем, как только я очистил сигнал тревоги, анимация будет идти... Я перепробовал множество различных способов определения обратного вызова, а также пытался использовать задержку и вызывать его в других местах... все еще нет выхода.

3 3
jquery callback jquery-animate

3 ответа:

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

Вы используете самоисполняющуюся функцию, поэтому вы видите предупреждение. попробуйте использовать анонимную самоисполняющуюся функцию с оператором return.

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

Замыкания-MDN

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

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

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

2