嵌套回调异步与$.Deferred异步

HTML：

<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

原标题：嵌套回调异步与$.Deferred异步

关键词：异步