首頁 > 文章 > web前端 > JS callback回呼函數使用案例詳解

JS callback回呼函數使用案例詳解

php中世界最好的语言原創: 2018-05-11 15:30:402213瀏覽

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