用过ajax的人都知道,在ajax的options中有个回调函数,通过这个回调函数我们可以得到并操作请求返回的数据。
最近一直在做js方面的事情,在工作过程中我也需要回调函数,不过是自己写的:
define(['zepto'],function($){ function uploadPicFmSubmit(formId,requestURL,fn){ var formdata = false; if (window.FormData) { formdata = new FormData(); } var subFm = $('#'+formId)[0]; var len = subFm.length; var reader; for ( var i=0; i < len; i++ ) { var ele = subFm[i]; var ele_name = ele.name; if (ele.type=='file') { var files = ele.files; for(var j=0;j<files.length;j++) { var file = files[j]; //if (!!file.type.match(/image.*/)){ if (window.FileReader) { reader = new FileReader(); reader.readAsDataURL(file); } if (formdata) { formdata.append(ele_name, file); } //} } }else{ if (formdata) { formdata.append(ele_name, ele.value); } } } if (formdata) { $.ajax({ url: requestURL, type: "POST", data: formdata, processData: false, contentType: false, success: function (res) { var msg = eval(res); fn(msg); }, error:function(e){ fn(e); } }); } } return{ uploadPicFmSubmit:uploadPicFmSubmit } });
以上代码是针对zeptojs未提供类似ajax form提交而编写的,遇到同样问题的同学可以拿去用。
uploadPicFmSubmit方法中的最后一个参数fn即就是我们自定义的回调函数,我们看到回调函数最后是被用在接收ajax请求结果的地方。
下来是外部调用的代码:
bindForBtn=function(){ $('#addBtn').bind('click',function(){ var requestURL = requestBaseUrl+'/taskhelper/workreport/save?webapp=1&token='+token; var formId = 'workreprot_fm'; _fh.uploadPicFmSubmit(formId,requestURL,function(data){ if(data.msg=='success'){ alert('保存成功!'); } }); }); };
我们看到传递进去的带参数的function对象被调用后就会到外部调用的地方。
其实就是带有function对象参数的方法的使用。
--------------------------------------------------------------------------------------------------------------
为了写组件,有时候需要避免一些对其他第三方类库的依赖。所以我在写某个组件的时候不得不以最原始的方法去异步请求数据。这个时候又遇到了回调函数。
var xmlhttp; function VcallBack(){ if(Vtree_validateState(xmlhttp)){ var res = xmlhttp.responseText; func(res); } } //js异步请求 var func; function Vtree_Quest(url,fn){ func = fn; if (window.XMLHttpRequest) { //针对FireFox,Mozillar,Opera,Safari,IE7,IE8 xmlhttp = new XMLHttpRequest(); //针对某些特定版本的mozillar浏览器的BUG进行修正 if (xmlhttp.overrideMimeType) { xmlhttp.overrideMimeType("text/xml"); } } else if (window.ActiveXObject) { //针对IE6,IE5.5,IE5 //两个可以用于创建XMLHTTPRequest对象的控件名称,保存在一个js的数组中 //排在前面的版本较新 var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"]; for (var i = 0; i < activexName.length; i++) { try{ //取出一个控件名进行创建,如果创建成功就终止循环 //如果创建失败,回抛出异常,然后可以继续循环,继续尝试创建 xmlhttp = new ActiveXObject(activexName[i]); break; } catch(e){ } } } //确认XMLHTtpRequest对象创建成功 if (!xmlhttp) { alert("fail to create XMLHttpRequest!!"); return; } xmlhttp.onreadystatechange = VcallBack; xmlhttp.open("POST",url,true); xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xmlhttp.send(null); } function Vtree_validateState(xmlhttp){ if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ return true; }else{ return false; } }
其实上面代码就是原始的异步请求代码,需要的同学也可以拿去用。这里外部调用入口方法是
Vtree_Quest(url,fn)
fn即就是回调函数,其实 xmlhttp.onreadystatechange = VcallBack这句绑定回调函数的代码完全可以把function对象VcallBack换成传入的fn,但是由于VcallBack这个函数中含有本地变量xmlhttp的一些判断,我们就需要再向外部与VcallBack中间夹上一层。
在本地 初始一个对象 func
在外部调用Vtree_Quest传入fn时将func赋值为fn
在VcallBack方法的xmlhttp.responseText处直接调用func对象并将结果值传入,这样我们就能在外部接收到最终的结果值。
相关推荐
回调函数是什么在学习之前还真不知道js回调函数怎么使用及作用了,下面本文章把我在学习回调函数例子给各位同学介绍一下吧,有需了解的同学不防进入参考。 回调函数原理: 我现在出发,到了通知你” 这是一个异步的...
1.回调函数定义 回调函数就是一个通过函数指针调用的函数。如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,我们就说这是回调函数。回调函数不是由该函数的实现方直接...
本文档为本人学习js时候做的笔记,只需要仅仅两个币就可以了,其中内容包括简单的数据类型,创建对象,数组,包装类BOM和DOM,其中重点的DOM包括基本的事件对象操作,轮盘绑定定时器,...回调函数,函数自调用和原型链
另一个用处就是针对js中一些无法含参的回调函数而言的。 明显的例子就是setInterval,我想这是很多人头疼的一个函数,尤其是你想在回调函数中添加参数的时候。 而且最叫人头疼的是,DHTML不是w3c规定的标准,于是...
Web API:DOM操作、定时器、事件、回调函数、日期对象、节点操作、移动端事件、Windows对象、本地存储、正则表达式 JavaScript高级:作用域、函数进阶、解构赋值、构造函数、编程思想、原型、深浅拷贝、异常处理、...
本文主要介绍了函数的调用方式、返回函数的函数、创建匿名函数、javascript创建动态函数、回调函数、方法和函数的区别、js全局函数、函数的几个作用、prototype属性、高阶函数,非常实用,有需要的参考下
还可以做为一个引用类型的值去使用,实际上我们前面的例子中已经有过将函数作为一个对象属性的值,又比如函数也可以作为另一个函数的参数或者返回值,异步处理中的回调函数就是一个典型的用法。 代码如下: var name ...
function 是 Javascript 中的第一类对象,这就意味着函数可以像其他值一样被传递。一个最常见的用法就是将一个匿名函数作为回调函数传递到另外一个异步函数中。
功能-js-101 使用学习函数 随机笔记 高阶函数是将另一个函数作为参数的函数或返回另一个函数的函数。... Array.protype.reduce对数组中的每个元素调用回调函数,并将其保存在previousValue (回调的第一个参数)中。
Javascript,简称为 JS,是一款能够运行在 JS解释器/引擎 中的脚本语言 JS解释器/引擎 是JS的运行环境: 1、独立安装的JS解释器 - NodeJS 2、嵌入在浏览器中的JS解释器 JS的发展史: 1、1992年 Nombas 开发...
笔记 项目已退役且未在积极开发中。...回调函数只有在option.delay给出的毫秒数内没有被调用后才会被调用。 一旦时间周期结束,回调将使用上次函数调用的参数执行。 例子: var check = Nag({delay:100
从最早的回调函数,到 Promise 对象,再到 Generator 函数,每次都有所改进,但又让人觉得不彻底。它们都有额外的复杂性,都需要理解抽象的底层运行机制。 异步I/O不就是读取一个文件吗,干嘛要搞得这么复杂?异步...
2、在回调函数中,处理响应数据 使用 xhr.responseXML 来获取响应数据,返回的是XML文档对象 4、解析XML文档对象的内容 1、核心方法 elem.getElementsByTagName("标签的名字"); elem:表示的是获取范围的对象 ...
使用 koa 编写 web 应用,可以免除重复繁琐的回调函数嵌套, 并极大地提升错误处理的效率。koa 不在内核方法中绑定任何中间件, 它仅仅提供了一个轻量优雅的函数库,使得编写 Web 应用变得得心应手。开发思路和...
小程序逻辑app.js:定义App函数用来注册一个小程序,包含全局数据和函数,指定小程序的生命周期回调等。整个小程序只有一个 App 实例,全部页面共享使用。 //app.js App({ onLaunch: function () { // 展示本地...
1、JavaScript ECMAScript 新特性 JavaScript vs.... 回调函数的执行原理 Promise 异步方案的使用进阶与剖析 处理异步任务的任务队列和事件循环 JavaScript 内部的宏任务与微任务 ES 6 Genera
回调功能 构造函数 原型 类型转换强制 数字字符串 计算字符和数字 小数位数 大写和小写 在句子中查找单词 分隔字符串 用构造函数创建数组 数组元素 数组的字符串 处理数组 表达式和运算符 新的 删除类型 算术运算符
J50Nπ 基本JSONP帮助程序(纯JS)作者罗伯托·德库内克斯(Roberto ... 它会自动设置为J50Npi.success ,它将执行给定的回调函数。笔记该库希望您的JSON调用接受url上的callback参数,并使用该函数名称包装JSON响应。