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


Posted in Javascript onMay 08, 2018

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
javascript Demo模态窗口
Dec 06 Javascript
利用JQuery的load函数动态加载其它页面的内容的实现代码
Dec 14 Javascript
19个很有用的 JavaScript库推荐
Jun 27 Javascript
JavaScript修改css样式style动态改变元素样式
Dec 16 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
Oct 31 Javascript
node.js中的http.response.end方法使用说明
Dec 14 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
Apr 16 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
Sep 04 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
Aug 29 Javascript
vue 注册组件的使用详解
May 05 Javascript
vue.js实现回到顶部动画效果
Jul 31 Javascript
Vue-cli4 配置 element-ui 按需引入操作
Sep 11 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
May 08 #Javascript
vue-cli 引入、配置axios的方法
May 08 #Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
May 08 #Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
May 08 #Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
May 08 #Javascript
详解基于mpvue的小程序markdown适配解决方案
May 08 #Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
May 08 #Javascript
You might like
PHP+AJAX实现无刷新注册(带用户名实时检测)
2007/01/02 PHP
PHP 输出缓存详解
2009/06/20 PHP
php相对当前文件include其它文件的方法
2015/03/13 PHP
phpMyAdmin安装并配置允许空密码登录
2015/07/04 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
js left,right,mid函数
2008/06/10 Javascript
子窗口、父窗口和Silverlight之间的相互调用
2010/08/16 Javascript
js变量以及其作用域详解
2020/07/18 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
javascript改变position值实现菜单滚动至顶部后固定
2013/01/18 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
2013/10/24 Javascript
JavaScript对内存分配及管理机制详细解析
2013/11/11 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
2013/11/12 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
2014/04/10 Javascript
jQuery级联操作绑定事件实例
2014/09/02 Javascript
javascript实现控制文字大中小显示
2015/04/28 Javascript
JavaScript实现横向滑出的多级菜单效果
2015/10/09 Javascript
详解angularjs获取元素以及angular.element()用法
2017/07/25 Javascript
JavaScript定时器setTimeout()和setInterval()详解
2017/08/18 Javascript
Vue2.0设置全局样式(less/sass和css)
2017/11/18 Javascript
[03:01]2014DOTA2国际邀请赛 小组赛7月13日TOPPLAY
2014/07/14 DOTA
[00:15]TI9观赛名额抽取
2019/07/10 DOTA
[01:07:19]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第一场 1月19日
2021/03/11 DOTA
Python计算程序运行时间的方法
2014/12/13 Python
Java多线程编程中ThreadLocal类的用法及深入
2016/06/21 Python
Python实现的计算器功能示例
2018/04/26 Python
python判断字符串或者集合是否为空的实例
2019/01/23 Python
pip install 使用国内镜像的方法示例
2020/04/03 Python
jupyter note 实现将数据保存为word
2020/04/14 Python
Lacoste美国官网:经典POLO衫品牌
2016/10/12 全球购物
家乐福台湾线上购物网:Carrefour台湾
2020/09/15 全球购物
税务干部鉴定材料
2014/02/11 职场文书
公益广告语集锦
2014/03/13 职场文书
保送生自荐信
2015/03/06 职场文书
初中班干部工作总结
2015/08/10 职场文书
基于redis+lua进行限流的方法
2022/07/23 Redis