這次帶給大家JavaScript callback回呼函數使用案例詳解，JavaScript callback回呼函數使用的注意事項有哪些，以下就是實戰案例，一起來看一下。
在使用開源專案的時候經常會使用到回呼函數，如果把回呼函數弄清楚了，那麼對我們深入了解開源專案會有很大幫助。
回呼函數百度百科的解釋：
回呼函數就是一個透過函數指標呼叫的函數。如果你把函數的指標（位址）當作參數傳遞給另一個函數，當這個指標被用來呼叫所指向的函數時，我們就說這是回呼函數。回調函數不是由該函數的實現方直接調用，而是在特定的事件或條件發生時由另外的一方調用的，用於對該事件或條件進行響應。
看起來不是那麼容易理解，我們來看個例子（知乎）：
你到一個商店買東西，剛好你要的東西沒有貨，於是你在店員那裡留下了你的電話，過了幾天店裡有貨了，店員就打了你的電話，然後你接到電話後就到店裡去取了貨。在這個例子裡，你的電話號碼就叫回調函數，你把電話留給店員就叫登記回調函數，店裡後來有貨了叫做觸發了回調關聯的事件，店員給你打電話叫做調用回調函數，你到店裡去取貨叫做回應回調事件。
這樣好理解多了吧，當店員被創建出來的時候，並不知道有誰會來商店裡買東西，店員需要和很多不同的對像打交道，需要適配不同類型的對象，這時候就需要回呼函數了。
我們透過一個例子來理解一下回呼函數的運用場景：
Me需要完成一個任務，計算1 1=？
Me如果要自己完成這個任務
程式碼如下：
#HTML 程式碼
<p class="imgp"> <p class="search"> <input class="put" type="text" id="keyWord"/> <ul id="tipList"></ul> </p>
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 服務，了解能造成的威脅非常重要。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
VeeValidate在vue專案裡表單校驗使用案例程式碼分析
以上是JavaScript callback回呼函數使用案例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
