700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > JavaScript callback回调函数使用案例详解

JavaScript callback回调函数使用案例详解

时间:2020-05-22 00:27:58

相关推荐

JavaScript callback回调函数使用案例详解

web前端|js教程

JavaScript,callback,js

web前端-js教程在使用开源项目的时候经常会使用到回调函数,如果把回调函数弄清楚了,那么对我们深入了解开源项目会有很大帮助。

圣诞节小游戏源码,ubuntu查看内存分配,爬虫土怎么消毒,php跟php5的区别,seo建站 案例lzw

回调函数百度百科的解释:

云虚拟主机源码安装,vscode 复制粘贴错位,Ubuntu翻墙,tomcat点击登录页面,黑客视频爬虫,php5.2 iis7,荔湾区seo优化托管公司,博客jsp网站源码下载,idc网站模板 dedelzw

回调函数就是一个通过函数指针调用的函数。如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,我们就说这是回调函数。回调函数不是由该函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,用于对该事件或条件进行响应。

wpe.dll源码,vscode打开命令行报错,g for ubuntu,2 tomcat环境搭建,胎生的爬虫,php 分析域名,seo名词解释及优化方法lzw

看上去不是那么容易理解,我们来看个例子(知乎):

你到一个商店买东西,刚好你要的东西没有货,于是你在店员那里留下了你的电话,过了几天店里有货了,店员就打了你的电话,然后你接到电话后就到店里去取了货。在这个例子里,你的电话号码就叫回调函数,你把电话留给店员就叫登记回调函数,店里后来有货了叫做触发了回调关联的事件,店员给你打电话叫做调用回调函数,你到店里去取货叫做响应回调事件。

这样好理解多了吧,当店员被创建出来的时候,并不知道有谁会来商店里买东西,店员需要和很多不同的对象打交道,需要适配不同类型的对象,这个时候就需要回调函数了。

我们通过一个事例来理解一下回调函数的运用场景:

Me需要完成一个任务,计算1+1=?

Me如果要自己完成这个任务

代码如下:

HTML 代码

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 = "/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 += "

"+text+"" } $("#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 服务,了解能造成的威胁非常重要。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。