標籤:font func log ref button 運行 方法 charset test
jQuery代碼中對回呼函數有著廣泛的應用,對其有精準的理解是非常有必要的,下面就通過執行個體對此方法進行簡單的介紹。
代碼執行個體如下:
利用回呼函數,當div全部隱藏之後彈出一個提示框。
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.jb51.net/" /><title>回呼函數</title><style type="text/css">div{ height:150px; width:150px; background-color:green; margin-top:10px;}</style><script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script><script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("div").slideUp(2000,function(){alert("隱藏完畢")}); }) }) </script></head><body><div></div><button>點擊查看效果</button></body></html>
上面的代碼運行非常良好,很有次序。在很多實際應用中往往希望讓程式碼完成某個動作以後再去做另一個動作。
代碼貌似應執行的效果應該和上面代碼是一樣的,但是運行結果且並非我們所預料,而是先彈出提示框,然後再隱藏div元素。這並不是說slideUp()沒有開始執行。
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.jb51.net/" /><title>回呼函數</title><style type="text/css">div{ height:150px; width:150px; background-color:green; margin-top:10px;}</style><script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script><script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("div").slideUp(2000); alert("隱藏完畢"); }) }) </script></head><body><div></div><button>點擊查看效果</button></body></html>
下面簡單通俗的總結一下什麼是回呼函數。看下面這段代碼:
function a(){alert("我是一個函數")}a();
以上是最常用的調用函數的方式,用函數的實現直接調用,而回呼函數卻不是這樣的,它是將自己的地址作為參數傳遞給另一個函數,當發生特定的事件的時候就會使用作為參數傳遞過來的回呼函數地址來調用回呼函數。就拿上面使用回呼函數的那個代碼來說,它是把function函數的地址作為參數傳遞給slideUp()方法,當slideUp()動作完成之後,就會通過傳過來的地址參數調用function函數。
--------------------------------------------------------------------------------------------------------------------------------------------------------------
本文轉載自:http://www.jb51.net/article/58862.htm
Jquery回呼函數應用執行個體解析