這次帶給大家JS callback回呼函數使用步驟詳解,JS 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中文網其它相關文章!
推薦閱讀:
以上是JS callback回呼函數使用步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!