在使用Jquery的時候,用到Callback(),回調函數的概念。而且很多。
比如:
$.ajax({ url:"test.json", type: "GET", data: {username:$("#username").val()}, dataType: "json", beforSend:function(){ // 禁用按鈕防止重復提交 $("#submit").attr({ disabled: "disabled" }); }, complete:function(msg){ //請求完成后調用的回調函數(請求成功或失敗時均調用) } , error:function(msg){ //請求失敗時被調用的函數 } , Sucess:function(msg){ //請求成功后調用的回調函數 } });
回調函數大家都會用,只是Jquery封裝了之后,不能讓大家明白回調函數的真正使用。
JS Api 里這樣解釋:
A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.
當然我們可以在JS當中來真正嘗試一下回調函數的神奇。
如果你直接在函數a里調用的話,那么這個回調函數就被限制死了。但是使用函數做參數就有下面的好處:當你a(b)的時候函數b就成了回調函數,而你還可以a(c)這個時候,函數c就成了回調函數。如果你寫成了function a(){...;b();}就失去了變量的靈活性。下面是代碼:
<!DOCTYPE HTML> <html> <head> <meta charset="GBK" /> <title>回調函數(callback)</title> <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script> <script language="javascript" type="text/javascript"> var f; function d(){ alert("我是Jquery定義的函數d"); } var e = function(){ alert("我也是Jquery定義的函數e"); } function a(callback) { alert("我是parent函數a!"); d(); if (typeof callback === "function"){ //alert(callback); callback(); } } function b(){ alert("我是回調函數b"); d(); e(); f(); } function c(){ alert("我是回調函數c"); d(); e(); f(); } function test1() { a(b); } function test2() { a(c); } $(function(){ f = function(){ alert("我是回調函數f"); } }); </script> </head> <body > <h1>學習js回調函數</h1> <button onClick=test1()>test a(b)</button> <button onClick=test2()>test a(c)</button> <p>應該能看到調用了兩個回調函數</p> <p > </p> </body> </html>
網上看了一個例子,進行了修改,按上面方式可以回調成功,直接復制粘貼到html文件中即可測試