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 相关文章推荐
一些技巧性实用js代码小结
Oct 14 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
Aug 15 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
Sep 12 Javascript
js 自带的 map() 方法全面了解
Aug 16 Javascript
js实现按钮控制带有停顿效果的图片滚动
Aug 30 Javascript
JavaScript实现移动端轮播效果
Jun 06 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
Jun 19 Javascript
Echarts基本用法_动力节点Java学院整理
Aug 11 Javascript
vue实现表格过滤功能
Sep 27 Javascript
axios如何取消重复无用的请求详解
Dec 15 Javascript
vue接通后端api以及部署到服务器操作
Aug 13 Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 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中使用XML
2006/10/09 PHP
一个简单的MySQL数据浏览器
2006/10/09 PHP
php cookie 登录验证示例代码
2009/03/16 PHP
php在项目中寻找代码的坏味道(综艺命名)
2012/07/19 PHP
PDO防注入原理分析以及使用PDO的注意事项总结
2014/10/23 PHP
php遍历、读取文件夹中图片并分页显示图片的方法
2016/11/15 PHP
PHP经典实用正则表达式小结
2017/05/04 PHP
javascript String 对象
2008/04/25 Javascript
Firefox和IE浏览器兼容JS脚本写法小结
2008/07/07 Javascript
按给定几率进行随机抽取的js代码
2010/12/28 Javascript
jquery的live使用注意事项
2014/02/18 Javascript
javascript的事件触发器介绍的实现
2014/06/05 Javascript
使用javascript实现Iframe自适应高度
2014/12/24 Javascript
javascript实现链接单选效果的方法
2015/05/13 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
2016/12/14 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
2017/02/12 Javascript
利用 spin.js 生成等待效果(js 等待效果)
2017/06/25 Javascript
微信小程序 上传头像的实例详解
2017/10/27 Javascript
基于JavaScript canvas绘制贝塞尔曲线
2018/12/25 Javascript
[01:01:13]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第三场
2018/04/06 DOTA
Python实现基于二叉树存储结构的堆排序算法示例
2017/12/08 Python
Tensorflow之Saver的用法详解
2018/04/23 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
创建Shapefile文件并写入数据的例子
2019/11/26 Python
Python 字典中的所有方法及用法
2020/06/10 Python
python中scrapy处理项目数据的实例分析
2020/11/22 Python
Python3爬虫RedisDump的安装步骤
2021/02/20 Python
pandas数据分组groupby()和统计函数agg()的使用
2021/03/04 Python
世界首屈一指的在线男士内衣权威:HisRoom
2017/08/05 全球购物
有abstract方法的类一定要用abstract修饰吗
2016/03/14 面试题
留学推荐信范文
2014/05/10 职场文书
建筑安全员岗位职责
2015/02/15 职场文书
2015年酒店工作总结范文
2015/04/07 职场文书
如何计划开一家便利店?
2019/07/31 职场文书
六年级作文之自救
2019/12/19 职场文书