Your SlideShare is downloading. ×
Javascript中异步编程简介
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Javascript中异步编程简介

1,661
views

Published on

Published in: Technology

0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,661
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 异步编程中的流程控制 Javascript异步编程简介12年4月9日星期⼀一
  • 2. 关于我 http://jser.me 草依山 @ihubo http://ihubo.renren.com 人人网 FED 前端工程师12年4月9日星期⼀一
  • 3. 提纲 异步编程在前端的场景 发展过程 Promise规范 JQuery的Deferred Jscex12年4月9日星期⼀一
  • 4. 什么是异步 异步的概念和同步相对。 当⼀一个异步过程调用发出后,调用者不能立刻 得到结果。实际处理这个调用的部件在完成 后,通过状态、通知和回调来通知调用者。 未来的某个时刻完成的操作12年4月9日星期⼀一
  • 5. 哪里会异步 浏览器里 各种事件(key*, mouse*, load, postMessage, requestAnimationFrame) 定时器(setTimeout/setInterval) Node.js里 IO、Net ... ...12年4月9日星期⼀一
  • 6. 从简单回调开始 asyncTask.success(function(){}); btnA.onClick = function(){}; setTimeout(function(){}, 3000);12年4月9日星期⼀一
  • 7. 遇到问题了 A: asnycTask.succ(function(){ B.doSomething(); C.doSomething(); D.doSomething(); }); 需要回调的函数太多,调用者 与被调用者之间耦合过强12年4月9日星期⼀一
  • 8. 自定义事件 A: A.fireEvent(‘succ’, evtObj); B: A.addEvent(‘success’, function(e){}); C: A.addEvent(‘success’, function(e){});12年4月9日星期⼀一
  • 9. 多级回调带来问题 asyncTask.succ(function(){ A.succ(function(){ B.succ(function(){ C.succ(function(){ ... }); }); }); }); 代码丑陋,不利阅读,不利维护12年4月9日星期⼀一
  • 10. CommonJS Promise规范 http://wiki.commonjs.org/wiki/Promises 用于简化多异步回调操作 有A/B/C/D/KISS 四种形式12年4月9日星期⼀一
  • 11. Promise/A ⼀一个Promise只能有三种状态 未完成、完成、 失败 只能 未完成-->完成 未完成-->失败 ⼀一旦完成或者失败,不能再修改 promise必须有⼀一个then方法 then(fulfilledHandler, errorHandler, progressHandler)12年4月9日星期⼀一
  • 12. Promise with Jquery 从1.5开始引用Deferred对象,实现Promise/A 多个事件指定⼀一个回调$.when(taskA, taskB) deferred.resolve和deferred.reject改变状态 deferred.promise() 没有参数时,返回⼀一个新的 deferred对象,该对象的运行状态无法被改 变;接受参数时,作用为在参数对象上部署 deferred接口。12年4月9日星期⼀一
  • 13. var promise = $.ajax({ url: "/myServerScript" });   promise.done(myStopAnimationFun ction); promise.done(myOtherAjaxFunctio n); promise.done(myShowInfoFunction ); promise.fail(myErrorFunction);12年4月9日星期⼀一
  • 14. var promise1 = $.ajax("/ myServerScript1"); var promise2 = $.ajax("/ myServerScript2");   $.when(promise1, promise2).then(function(response1, response2){ // Handle both responses });12年4月9日星期⼀一
  • 15. var taskA = function(){ var dtd = $.Deferred(); setTimeout(function(){ console.log( A finished ); dtd.resolve(); }, 2000); return dtd.promise(); }, taskB = function(){ console.log( B finished );}, taskC = function(){ console.log( C finished );}; $.when( taskA() ) .then( taskB ) .then( taskC );12年4月9日星期⼀一
  • 16. async https://github.com/caolan/async 非promise规范的实现,拥有大量简洁实用的 api,开发异步程序的瑞士军刀 Node.js开发必备12年4月9日星期⼀一
  • 17. API: series parallel whilst until waterfall queue12年4月9日星期⼀一
  • 18. async.series({ one: function(callback){ setTimeout(function(){ callback(null, 1); }, 200); }, two: function(callback){ setTimeout(function(){ callback(null, 2); }, 100); }, }, function(err, results) { // results is now equal to: {one: 1, two: 2} });12年4月9日星期⼀一
  • 19. async.parallel([ function(callback){ setTimeout(function(){ callback(null, one); }, 200); }, function(callback){ setTimeout(function(){ callback(null, two); }, 100); }, ], // optional callback function(err, results){ // the results array will equal [one,two] even though // the second function had a shorter timeout. });12年4月9日星期⼀一
  • 20. async.waterfall([ function(callback){ callback(null, one, two); }, function(arg1, arg2, callback){ callback(null, three); }, function(arg1, callback){ // arg1 now equals three callback(null, done); } ], function (err, result) { // result now equals done });12年4月9日星期⼀一
  • 21. jscex 国产神器 以同步的简单思维书写异步代码 提供⼀一个$await操作,输入的代码会被编译成 普通的回调形式12年4月9日星期⼀一
  • 22. var printAsync = eval(Jscex.compile("async", function (text) { console.log(text); })); // 得到Jscex.Async.Task对象 var task = printAsync("Hello World"); task.start(); // 输出“Hello World”12年4月9日星期⼀一
  • 23. var Task = Jscex.Async.Task; var getFollowersAsync = eval(Jscex.compile("async", function (userId) { // 获取所有追随者的ID var followerIds = $await(getFollowerIds(userId)); return $await(Task.whenAll({ user: getUserAsync(userId), followers: followerIds.map(function (id) { return getUserAsync(id); }) })); }); getFollowersAsync(123).start();12年4月9日星期⼀一
  • 24. End12年4月9日星期⼀一

×