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 form action动态修改方法
Nov 04 Javascript
Prototype源码浅析 Enumerable部分(二)
Jan 18 Javascript
jquery获取tr并更改tr内容示例代码
Feb 13 Javascript
判断某个字符在一个字符串中是否存在的js代码
Feb 28 Javascript
Jquery操作js数组及对象示例代码
May 11 Javascript
ES6新特性之字符串的扩展实例分析
Apr 01 Javascript
详解require.js配置路径的用法和css的引入
Sep 06 Javascript
JavaScript中Object值合并方法详解
Dec 22 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
Apr 03 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
Feb 27 Javascript
JavaScript实现随机点名器
Mar 25 Javascript
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
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实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
ajaxControlToolkit AutoCompleteExtender的用法
2008/10/30 Javascript
javascript正则表达式基础知识入门
2015/04/20 Javascript
跟我学习javascript创建对象(类)的8种方法
2015/11/20 Javascript
js实现日历与定时器
2017/02/22 Javascript
详解vue-router基本使用
2017/04/18 Javascript
简单实现js轮播图效果
2017/07/14 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
2017/10/14 jQuery
在vue中安装使用vux的教程详解
2018/09/16 Javascript
关于JSON解析的实现过程解析
2019/10/08 Javascript
Python操作SQLite简明教程
2014/07/10 Python
让python同时兼容python2和python3的8个技巧分享
2014/07/11 Python
对python中Librosa的mfcc步骤详解
2019/01/09 Python
详解安装mitmproxy以及遇到的坑和简单用法
2019/01/21 Python
Python3.6实现带有简单界面的有道翻译小程序
2019/04/16 Python
Python实现的插入排序,冒泡排序,快速排序,选择排序算法示例
2019/05/04 Python
python的pygal模块绘制反正切函数图像方法
2019/07/16 Python
Django 重写用户模型的实现
2019/07/29 Python
python3 写一个WAV音频文件播放器的代码
2019/09/27 Python
基于python实现从尾到头打印链表
2019/11/02 Python
在pycharm中为项目导入anacodna环境的操作方法
2020/02/12 Python
python suds访问webservice服务实现
2020/06/26 Python
Python+Opencv实现把图片、视频互转的示例
2020/12/17 Python
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
2016/06/28 HTML / CSS
英国领先的NHS批准的在线药店:Pharmacy2U
2017/01/06 全球购物
印度在线杂货店:bigbasket
2018/08/23 全球购物
美国家用和厨房电器销售网站:Appliances Connection
2020/01/24 全球购物
自我评价范文分享
2014/01/04 职场文书
经贸专业毕业生求职信
2014/03/23 职场文书
财务管理专业自荐书
2014/09/02 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
2014年十八届四中全会思想汇报范文
2014/10/17 职场文书
2015年招商引资工作总结
2015/04/25 职场文书
浅谈JS的二进制家族
2021/05/09 Javascript
Mysql数据库表中为什么有索引却没有提高查询速度
2022/02/24 MySQL
ubuntu下常用apt命令介绍
2022/06/05 Servers