瞭解對象文字中的JavaScript匿名與命名函數

爲什麼在任何動畫開始之前第三個動畫的「完成」回調會先發生？瞭解對象文字中的JavaScript匿名與命名函數

腳本：

$("#animate").delay(2000).animate(
    { "width": "500px" }, 
    { "duration": 3000, 
     "complete": function(){ $("#animate").append("1st<br />"); }} 
) 
.delay(1000).animate(
    { "width": "200px" }, 
    { "duration": 3000, 
     "complete": function(){ complete("2nd"); }} 
) 
.delay(1000).animate(
    { "width": "500px" }, 
    { "duration": 3000, 
     "complete": complete("3rd") } 
); 

function complete(ordinal){ 
    $("#animate").append(ordinal + "<br />"); 
};

HTML：

<div id="animate" />

CSS：

#animate 
{ 
    border: 1px solid red; 
    height: 200px; 
    width: 200px; 
}

的jsfiddle：

http://jsfiddle.net/nQftS/3/

來源

2011-08-29 ThinkingStiff

回調需要一個函數。但是，你不能傳遞一個函數。你一個函數調用。

"complete": complete("3rd")

它附加在該函數中定義的東西。然後，它沒有返回值，所以它的計算結果爲：

"complete": undefined

注意，傳遞函數不帶括號的作品。例如。

"complete": complete

或

"complete": function() { ... } // this is also a function

來源

2011-08-29 20:02:15 pimvdb

這很清楚。它讓我意識到parens進行調用，就像模式：'（function（）{...}）（）;'。知道它返回了'undefined'，並且它期待一個函數聲明，而是讓我重寫'complete（）'並且仍然保持'「complete」的簡潔可讀性：complete（「3rd」）' 。新函數：'function complete（ordinal）{return function（）{...}; };'。 – ThinkingStiff

"complete": complete("3rd")

該行將執行complete函數，傳遞參數「3rd」，然後將該函數的返回值設置爲「complete」。

"complete": function(){ complete("2nd"); }

這條線將設置改爲「完整」的功能，它被調用時，將執行complete函數，傳遞的「第二」的參數。

來源

2011-08-29 20:01:51

在您的最後一部分，它包裝在一個函數：

.delay(1000).animate( 
    { "width": "500px" }, 
    { "duration": 3000, 
     "complete": function(){complete("3rd") } 
    } 
);

如果你不這樣做，那麼該功能將立即被調用，這是不是你想要什麼。

來源

2011-08-29 20:02:44 Neal

瞭解對象文字中的JavaScript匿名與命名函數

回答

相關問題