嵌套回调异步与$.Deferred异步
2016-03-01 09:01
330 查看
HTML:
JS:
DEMO地址:http://codepen.io/jonechen/pen/EKaXxb
<input type="button" id="btn1" value="嵌套回调异步"> <input type="button" id="btn2" value="$.Deferred异步"> <p>显示结果:<span id="result"></span></p>
JS:
var btn_1 = document.querySelector('#btn1'); var btn_2 = document.querySelector('#btn2'); btn_1.onclick = function() { //模拟异步A function A(callback) { setTimeout(function() { callback(1) }, 500) }; //模拟异步B function B(callback, value) { setTimeout(function() { callback(value + 2) }, 500) } //A执行完毕后,在执行B A(function(data1) { B(function(data2) { document.querySelector('#result').innerHTML = "嵌套异步:" + data2; }, data1) }) } btn_2.onclick = function() { //模拟异步C function C() { var dtd = $.Deferred(); //创建 setTimeout(function() { dtd.resolve(3) //成功 }, 500) return dtd }; //模拟异步D function D(value) { var dtd = $.Deferred(); setTimeout(function() { dtd.resolve(value + 4) }, 500) return dtd } //模拟异步E function E(value) { var dtd = $.Deferred(); setTimeout(function() { dtd.resolve(value + 5) }, 500) return dtd } C().then(function(data) { //执行回调 return D(data) }).then(function(data) { return E(data) }).then(function(data) { document.querySelector('#result').innerHTML = "Deferred异步处理:" + data; }) }
DEMO地址:http://codepen.io/jonechen/pen/EKaXxb
相关文章推荐
- html中各标签的意义
- 原生javascript实现解析XML文档与字符串
- JS创建对象几种不同方法详解
- SeaJS简介三:模块载入和引用
- web前端开发问题
- AngularJs(七) 过滤器(filter)
- css+div网页布局大全
- CSS样式设置详解
- CSS代码缩写,单位和值
- CSS布局模型
- CSS盒模型
- CSDN页面内JS跳转脚本
- [Immutable.js] Working with Subsets of an Immutable.js Map()
- [Immutable,js] Iterating Over an Immutable.js Map()
- [Hapi.js] Managing State with Cookies
- Reentrancy and Thread-Safety
- 2016/3/1 淘宝 腾讯 网易 css初始化代码 以及最基础的初始化
- JSP通过Servlet提交表单数据并显示
- 项目部署到Tomat报异常:jar not loaded. See Servlet Spec 2.3, section 9.7.2. Offending ...
- day04—html之JSP基础