Web開發技術——JQuery6（Callback函數、Chaning）

標籤：

jQuery Callback 函數

Callback 函數在當前動畫 100% 完成之後執行。

jQuery 動畫的問題

許多 jQuery 函數涉及動畫。這些函數也許會將 speed 或 duration 作為選擇性參數。

例子：$("p").hide("slow")

speed 或 duration 參數可以設定許多不同的值，比如 "slow", "fast", "normal" 或毫秒。

執行個體

$("button").click(function(){

$("p").hide(1000);

});

由於 JavaScript 語句（指令）是逐一執行的 - 按照次序，動畫之後的語句可能會產生錯誤或頁面衝突，因為動畫還沒有完成。

為了避免這個情況，您可以以參數的形式添加 Callback 函數。

jQuery Callback 函數

當動畫 100% 完成後，即調用 Callback 函數。

典型的文法：

$(selector).hide(speed,callback)

callback 參數是一個在 hide 操作完成後被執行的函數。

錯誤（沒有 callback）

$("p").hide(1000);

alert("The paragraph is now hidden");

正確（有 callback）

$("p").hide(1000,function(){

alert("The paragraph is now hidden");

});

結論：如果您希望在一個涉及動畫的函數之後來執行語句，請使用 callback 函數。

jQuery - Chaining

通過 jQuery，您可以把動作/方法連結起來。

Chaining 允許我們在一條語句中允許多個 jQuery 方法（在相同的元素上）。

jQuery 方法連結

直到現在，我們都是一次寫一條 jQuery 語句（一條接著另一條）。

不過，有一種名為連結（chaining）的技術，允許我們在相同的元素上運行多條 jQuery 命令，一條接著另一條。

提示：這樣的話，瀏覽器就不必多次尋找相同的元素。

如需連結一個動作，您只需簡單地把該動作追加到之前的動作上。

例子 1

下面的例子把 css(), slideUp(), and slideDown() 連結在一起。"p1" 元素首先會變為紅色，然後向上滑動，然後向下滑動：

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

如果需要，我們也可以添加多個方法調用。

提示：當進行連結時，程式碼會變得很差。不過，jQuery 在文法上不是很嚴格；您可以按照希望的格式來寫，包含折行和縮排。

例子 2

這樣寫也可以運行：

$("#p1").css("color","red")

  .slideUp(2000)

  .slideDown(2000);

Web開發技術——JQuery6（Callback函數、Chaning）