Jquery回調函數應用實例解析
阿新 • • 發佈：2017-06-12
light wid cnblogs 動作 body span 廣泛 使用 我們
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回調函數應用實例解析