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

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

3 голосов
/ 09 марта 2012 
<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 ]

5 голосов
/ 09 марта 2012 
 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
        }               
     );
  ...
}

если нет, то вы можете добавить имя и индекс для externalwrapper: 

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);}
        }               
     );
  ...
}
2 голосов
/ 09 марта 2012 
var tmp = function () {
  console.log("automatically executed!");
}();

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

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

2 голосов
/ 09 марта 2012

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

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

Затворы - MDN

...