爲什麼在動畫完成之前調用jQuery的完整函數？

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

某處在我做的代碼：爲什麼在動畫完成之前調用jQuery的完整函數？

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

然而，警報立即只要按下按鈕上來，那麼一旦我清除警報，動畫會去...我已經試過指定回調的許多不同的方式，以及嘗試使用延遲，並在其他地方打電話...仍然沒有去。

來源

2012-03-09 codenamezero

我在我的js調試中也使用alert（「wtf」）！只是不要忘記在發射之前把它拿出來......可能會讓人感到尷尬。 :) – evasilchenko 2012-03-09 17:18:20

哈。你是對的需要使用閉包，但看到我的迴應，你很接近。 - 編輯，雖然我猜你並不需要關閉，但我認爲它是在一個循環內運行的。 – thescientist 2012-03-09 17:21:49

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

來源

2012-03-09 17:16:00

第一個解決方案起作用。奇怪的是，在某些時候，我嘗試了它，但沒有將（姓名，索引）傳遞給它，它會拋出錯誤。但非常感謝，自昨晚以來一直在抨擊這件事！ – codenamezero 2012-03-09 18:24:34

您使用的是自執行的函數這就是你看到警報的原因。嘗試使用帶有return語句的匿名自執行函數。

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

Closures - MDN

來源

2012-03-09 17:17:34 thescientist

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

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

因此，與調用回調等待。

來源

2012-03-09 17:19:13 jack

爲什麼在動畫完成之前調用jQuery的完整函數？

回答

相關問題