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中解析JSON数据的三种方法
Jul 03 Javascript
jquery-mobile表单的创建方法详解
Nov 23 Javascript
jQuery操作css样式
May 15 jQuery
详解使用nvm安装node.js
Jul 18 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
Mar 17 Javascript
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
Vue EventBus自定义组件事件传递
Jun 25 Javascript
vue动态设置img的src路径实例
Sep 18 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
Sep 21 Javascript
实例讲解JS中pop使用方法
Jan 27 Javascript
原生js实现的金山打字小游戏(实例代码详解)
Mar 16 Javascript
vue router-link 默认a标签去除下划线的实现
Nov 06 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函数常用用法小结
2010/02/08 PHP
PHP警告Cannot use a scalar value as an array的解决方法
2012/01/11 PHP
解析php addslashes()与addclashes()函数的区别和比较
2013/06/24 PHP
Symfony2安装的方法(2种方法)
2016/02/04 PHP
PHP6新特性分析
2016/03/03 PHP
iOS+PHP注册登录系统 PHP部分(上)
2016/12/26 PHP
PHP 7.0新增加的特性介绍
2017/06/08 PHP
如何利用预加载优化Laravel Model查询详解
2017/08/11 PHP
PHP面向对象程序设计之对象克隆clone和魔术方法__clone()用法分析
2019/06/12 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
JS面向对象、prototype、call()、apply()
2009/05/14 Javascript
jQuery对象[0]是什么含义?
2010/07/31 Javascript
javascript标签在页面中的位置探讨
2013/04/11 Javascript
JavaScript中DOM详解
2015/04/13 Javascript
JS把内容动态插入到DIV的实现方法
2016/07/19 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
2017/03/08 Javascript
详谈表单格式化插件jquery.serializeJSON
2017/06/23 jQuery
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
2017/11/02 Javascript
Vue防止白屏添加首屏动画的实例
2019/10/31 Javascript
JS继承实现方法及优缺点详解
2020/09/02 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
2020/10/29 Javascript
Python输出PowerPoint(ppt)文件中全部文字信息的方法
2015/04/28 Python
12步入门Python中的decorator装饰器使用方法
2016/06/20 Python
pymysql模块的使用(增删改查)详解
2019/09/09 Python
Python解释器及PyCharm工具安装过程
2020/02/26 Python
CSS3中的元素过渡属性transition示例详解
2016/11/30 HTML / CSS
We Fashion荷兰:一家国际时装公司
2018/04/18 全球购物
国际花店:Pickup Flowers
2020/04/10 全球购物
高三毕业感言
2015/07/30 职场文书
优秀学生干部主要事迹材料
2015/11/04 职场文书
利用Python实现Picgo图床工具
2021/11/23 Python
「回转企鹅罐」10周年纪念展「輪るピングドラム展」海报公开
2022/03/22 日漫
星际争霸:毕姥爷vs解冻01
2022/04/01 星际争霸
Python字符串常规操作小结
2022/04/03 Python