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 仿关机效果的图片层
Dec 26 Javascript
My Desktop :) 桌面式代码
Dec 29 Javascript
js 上传图片预览问题
Dec 06 Javascript
js switch case default 的用法示例介绍
Oct 23 Javascript
使用js如何实现全选与全不选
Dec 30 Javascript
javascript感应鼠标图片透明度显示的方法
Feb 24 Javascript
vue构建动态表单的方法示例
Sep 22 Javascript
mockjs+vue页面直接展示数据的方法
Dec 19 Javascript
如何获取vue单文件自身源码路径
May 06 Javascript
微信小程序如何实现五星评价功能
Oct 15 Javascript
Vue实现PC端靠边悬浮球的代码
May 09 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
May 09 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正确解析UTF-8字符串技巧应用
2012/11/07 PHP
PHP插入排序实现代码
2013/04/04 PHP
php使用base64加密解密图片示例分享
2014/01/20 PHP
php不使用copy()函数复制文件的方法
2015/03/13 PHP
Zend Framework数据库操作技巧总结
2017/02/18 PHP
灵活应用js调试技巧解决样式问题的步骤分享
2012/03/15 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
2013/05/19 Javascript
JavaScript实现网页上的浮动广告的简单方法
2013/06/14 Javascript
jQuery EasyUI datagrid实现本地分页的方法
2015/02/13 Javascript
JQuery中层次选择器用法实例详解
2015/05/18 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
2015/08/25 Javascript
EsLint入门学习教程
2017/02/17 Javascript
JavaScript实现三级联动菜单效果
2017/08/16 Javascript
JS返回顶部实例代码
2020/08/09 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
2017/12/14 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
2018/09/03 Javascript
JS使用Chrome浏览器实现调试线上代码
2020/07/23 Javascript
[01:33:14]LGD vs VP Supermajor 败者组决赛 BO3 第二场 6.10
2018/07/04 DOTA
基于Python和Scikit-Learn的机器学习探索
2017/10/16 Python
python编写朴素贝叶斯用于文本分类
2017/12/21 Python
Django数据库表反向生成实例解析
2018/02/06 Python
Python内置模块logging用法实例分析
2018/02/12 Python
解决python3捕获cx_oracle抛出的异常错误问题
2018/10/18 Python
Python3爬虫爬取百姓网列表并保存为json功能示例【基于request、lxml和json模块】
2018/12/05 Python
python读写csv文件方法详细总结
2019/07/05 Python
python读取ini配置文件过程示范
2019/12/23 Python
Tensorflow获取张量Tensor的具体维数实例
2020/01/19 Python
css3旋转木马_动力节点Java学院整理
2017/07/12 HTML / CSS
英国工艺品购物网站:Minerva Crafts
2018/01/29 全球购物
犹他州最古老的体育用品公司:Al’s
2020/12/18 全球购物
歌剧魅影观后感
2015/06/05 职场文书
光荣之路观后感
2015/06/12 职场文书
MySQL里面的子查询的基本使用
2021/08/02 MySQL
SQL优化老出错,那是你没弄明白MySQL解释计划用法
2021/11/27 MySQL
MySQL运行报错:“Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre”解决方法
2022/06/14 MySQL
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python