本文實例講述了JavaScript callback回調函數用法。分享給大家供大家參考，具體如下：
在使用開源項目的時候經常會使用到回調函數，如果把回調函數弄清楚了，那么對我們深入了解開源項目會有很大幫助。
回調函數百度百科的解釋：
回調函數就是一個通過函數指針調用的函數。如果你把函數的指針（地址）作為參數傳遞給另一個函數，當這個指針被用來調用其所指向的函數時，我們就說這是回調函數?；卣{函數不是由該函數的實現方直接調用，而是在特定的事件或條件發生時由另外的一方調用的，用于對該事件或條件進行響應。
看上去不是那么容易理解，我們來看個例子（知乎）：
你到一個商店買東西，剛好你要的東西沒有貨，于是你在店員那里留下了你的電話，過了幾天店里有貨了，店員就打了你的電話，然后你接到電話后就到店里去取了貨。在這個例子里，你的電話號碼就叫回調函數，你把電話留給店員就叫登記回調函數，店里后來有貨了叫做觸發了回調關聯的事件，店員給你打電話叫做調用回調函數，你到店里去取貨叫做響應回調事件。
這樣好理解多了吧，當店員被創建出來的時候，并不知道有誰會來商店里買東西，店員需要和很多不同的對象打交道，需要適配不同類型的對象，這個時候就需要回調函數了。
我們通過一個事例來理解一下回調函數的運用場景：
Me需要完成一個任務，計算1+1=？
Me如果要自己完成這個任務
代碼如下：
HTML 代碼
<div class="imgDiv"> <div class="search"> <input class="put" type="text" id="keyWord"/> <ul id="tipList"></ul></div>
JavaScript 代碼
(function (){ $(function(){ $("#keyWord").on("keyup",function(event){ var keyCode = event.keyCode; if(keyCode == 38|| keyCode ==40){ settingTipList(keyCode); return false; } var keyWord = $(this).val(); getTipList(keyWord); }); var index = -1; function settingTipList(keyCode){ if(keyCode == 38){ index--; }else{ index++; } var size = $("#tipList li").size(); index =index % size; $("#tipList li").removeClass("active").eq(index).addClass("active"); var selectLiContent = $("#tipList li").eq(index).html(); $("#keyWord").val(selectLiContent); }; //獲取數據 function getTipList(keyWord){ var url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su"; var data = { wd:keyWord, cb:"hhh" }; $.ajax({ url:url, data:data, type:"GET", dataType:"jsonp", jsonpCallback:"hhh", success:function(data){ var tipList = data.s; handleData(tipList) }, error:function(error){ alert("接口出錯") } }); } }); function handleData(tipList){ var tipHTML= ""; for(var i in tipList){ var text = tipList[i]; tipHTML += "<li>"+text+"</li>" } $("#tipList").css({"opacity":"1"}); $("#tipList").html(tipHTML); }})()//如果不寫jsonpCallback、后面jsonpCallback“”空置、直接跳出“接口出錯了。注意：
1. 使用ajax進行 JSONP跨域請求，因為被請求的對方的回調函數名稱是無法修改。而這邊頁面中會出現多個不同JSONP請求，但他們的回調函數名稱都是同一個，_Callback。想到設置AJAX 的JSONP參數。但是發現根本不起作用。最后偶然發現 jsonpcallback是區分大小寫的。是 jsonpCallback而不是jsonpcallback；
2. JSONP 是構建 mashup 的強大技術，但不幸的是，它并不是所有跨域通信需求的萬靈藥。它有一些缺陷，在提交開發資源之前必須認真考慮它們。第一，也是最重要的一點，沒有關于 JSONP 調用的錯誤處理。如果動態腳本插入有效，就執行調用；如果無效，就靜默失敗。失敗是沒有任何提示的。例如，不能從服務器捕捉到 404 錯誤，也不能取消或重新開始請求。不過，等待一段時間還沒有響應的話，就不用理它了。（未來的 jQuery 版本可能有終止 JSONP 請求的特性）JSONP 的另一個主要缺陷是被不信任的服務使用時會很危險。因為 JSONP 服務返回打包在函數調用中的 JSON 響應，而函數調用是由瀏覽器執行的，這使宿主 Web 應用程序更容易受到各類攻擊。如果打算使用 JSONP 服務，了解能造成的威脅非常重要。
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
