JavaScript callback回調(diào)函數(shù)用法實(shí)例分析

本文實(shí)例講述了JavaScript callback回調(diào)函數(shù)用法。分享給大家供大家參考，具體如下：

在使用開源項(xiàng)目的時(shí)候經(jīng)常會(huì)使用到回調(diào)函數(shù)，如果把回調(diào)函數(shù)弄清楚了，那么對(duì)我們深入了解開源項(xiàng)目會(huì)有很大幫助。

回調(diào)函數(shù)百度百科的解釋：

回調(diào)函數(shù)就是一個(gè)通過(guò)函數(shù)指針調(diào)用的函數(shù)。如果你把函數(shù)的指針（地址）作為參數(shù)傳遞給另一個(gè)函數(shù)，當(dāng)這個(gè)指針被用來(lái)調(diào)用其所指向的函數(shù)時(shí)，我們就說(shuō)這是回調(diào)函數(shù)。回調(diào)函數(shù)不是由該函數(shù)的實(shí)現(xiàn)方直接調(diào)用，而是在特定的事件或條件發(fā)生時(shí)由另外的一方調(diào)用的，用于對(duì)該事件或條件進(jìn)行響應(yīng)。

看上去不是那么容易理解，我們來(lái)看個(gè)例子（知乎）：

你到一個(gè)商店買東西，剛好你要的東西沒有貨，于是你在店員那里留下了你的電話，過(guò)了幾天店里有貨了，店員就打了你的電話，然后你接到電話后就到店里去取了貨。在這個(gè)例子里，你的電話號(hào)碼就叫回調(diào)函數(shù)，你把電話留給店員就叫登記回調(diào)函數(shù)，店里后來(lái)有貨了叫做觸發(fā)了回調(diào)關(guān)聯(lián)的事件，店員給你打電話叫做調(diào)用回調(diào)函數(shù)，你到店里去取貨叫做響應(yīng)回調(diào)事件。

這樣好理解多了吧，當(dāng)?shù)陠T被創(chuàng)建出來(lái)的時(shí)候，并不知道有誰(shuí)會(huì)來(lái)商店里買東西，店員需要和很多不同的對(duì)象打交道，需要適配不同類型的對(duì)象，這個(gè)時(shí)候就需要回調(diào)函數(shù)了。

我們通過(guò)一個(gè)事例來(lái)理解一下回調(diào)函數(shù)的運(yùn)用場(chǎng)景：

Me需要完成一個(gè)任務(wù)，計(jì)算1+1=？

Me如果要自己完成這個(gè)任務(wù)

代碼如下：

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);
  };
  //獲取數(shù)據(jù)
  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("接口出錯(cuò)")
      }
    });
  }
  });
  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“”空置、直接跳出“接口出錯(cuò)了。

注意：

1. 使用ajax進(jìn)行 JSONP跨域請(qǐng)求，因?yàn)楸徽?qǐng)求的對(duì)方的回調(diào)函數(shù)名稱是無(wú)法修改。而這邊頁(yè)面中會(huì)出現(xiàn)多個(gè)不同JSONP請(qǐng)求，但他們的回調(diào)函數(shù)名稱都是同一個(gè)，_Callback。想到設(shè)置AJAX 的JSONP參數(shù)。但是發(fā)現(xiàn)根本不起作用。最后偶然發(fā)現(xiàn) jsonpcallback是區(qū)分大小寫的。是  jsonpCallback而不是jsonpcallback；

2. JSONP 是構(gòu)建 mashup 的強(qiáng)大技術(shù)，但不幸的是，它并不是所有跨域通信需求的萬(wàn)靈藥。它有一些缺陷，在提交開發(fā)資源之前必須認(rèn)真考慮它們。第一，也是最重要的一點(diǎn)，沒有關(guān)于 JSONP 調(diào)用的錯(cuò)誤處理。如果動(dòng)態(tài)腳本插入有效，就執(zhí)行調(diào)用；如果無(wú)效，就靜默失敗。失敗是沒有任何提示的。例如，不能從服務(wù)器捕捉到 404 錯(cuò)誤，也不能取消或重新開始請(qǐng)求。不過(guò)，等待一段時(shí)間還沒有響應(yīng)的話，就不用理它了。（未來(lái)的 jQuery 版本可能有終止 JSONP 請(qǐng)求的特性）JSONP 的另一個(gè)主要缺陷是被不信任的服務(wù)使用時(shí)會(huì)很危險(xiǎn)。因?yàn)?JSONP 服務(wù)返回打包在函數(shù)調(diào)用中的 JSON 響應(yīng)，而函數(shù)調(diào)用是由瀏覽器執(zhí)行的，這使宿主 Web 應(yīng)用程序更容易受到各類攻擊。如果打算使用 JSONP 服務(wù)，了解能造成的威脅非常重要。

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript常用函數(shù)技巧匯總》、《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。