首頁 > web前端 > js教程 > 主體

JS callback回呼函數使用步驟詳解

php中世界最好的语言
發布: 2018-05-31 09:36:50
原創
1921 人瀏覽過

這次帶給大家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中文網其它相關文章!

推薦閱讀:

怎麼操作vuex與元件聯合使用

如何使用vux-ui自訂表單驗證

以上是JS callback回呼函數使用步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板