JavaScript callback回调函数用法实例分析

本文实例讲述了JavaScript callback回调函数用法。分享给大家供大家参考，具体如下：

在使用开源项目的时候经常会使用到回调函数，如果把回调函数弄清楚了，那么对我们深入了解开源项目会有很大帮助。

回调函数百度百科的解释：

回调函数就是一个通过函数指针调用的函数。如果你把函数的指针（地址）作为参数传递给另一个函数，当这个指针被用来调用其所指向的函数时，我们就说这是回调函数。回调函数不是由该函数的实现方直接调用，而是在特定的事件或条件发生时由另外的一方调用的，用于对该事件或条件进行响应。

看上去不是那么容易理解，我们来看个例子（知乎）：

你到一个商店买东西，刚好你要的东西没有货，于是你在店员那里留下了你的电话，过了几天店里有货了，店员就打了你的电话，然后你接到电话后就到店里去取了货。在这个例子里，你的电话号码就叫回调函数，你把电话留给店员就叫登记回调函数，店里后来有货了叫做触发了回调关联的事件，店员给你打电话叫做调用回调函数，你到店里去取货叫做响应回调事件。

这样好理解多了吧，当店员被创建出来的时候，并不知道有谁会来商店里买东西，店员需要和很多不同的对象打交道，需要适配不同类型的对象，这个时候就需要回调函数了。

我们通过一个事例来理解一下回调函数的运用场景：

Me需要完成一个任务，计算1+1=？

Me如果要自己完成这个任务

代码如下：

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);  };  //获取数据  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“”空置、直接跳出“接口出错了。