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“”空置、直接跳出“接口出错了。

注意：

1. 使用ajax进行 jsonp跨域请求，因为被请求的对方的回调函数名称是无法修改。而这边页面中会出现多个不同jsonp请求，但他们的回调函数名称都是同一个，_callback。想到设置ajax 的jsonp参数。但是发现根本不起作用。最后偶然发现 jsonpcallback是区分大小写的。是  jsonpcallback而不是jsonpcallback；

2. jsonp 是构建 mashup 的强大技术，但不幸的是，它并不是所有跨域通信需求的万灵药。它有一些缺陷，在提交开发资源之前必须认真考虑它们。第一，也是最重要的一点，没有关于 jsonp 调用的错误处理。如果动态脚本插入有效，就执行调用；如果无效，就静默失败。失败是没有任何提示的。例如，不能从服务器捕捉到 404 错误，也不能取消或重新开始请求。不过，等待一段时间还没有响应的话，就不用理它了。（未来的 jquery 版本可能有终止 jsonp 请求的特性）jsonp 的另一个主要缺陷是被不信任的服务使用时会很危险。因为 jsonp 服务返回打包在函数调用中的 json 响应，而函数调用是由浏览器执行的，这使宿主 web 应用程序更容易受到各类攻击。如果打算使用 jsonp 服务，了解能造成的威胁非常重要。

更多关于javascript相关内容可查看本站专题：《javascript常用函数技巧汇总》、《javascript面向对象入门教程》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》及《javascript数学运算用法总结》

希望本文所述对大家javascript程序设计有所帮助。